编写一个图形界面应用程序,界面效果如下图所示,其中窗口标题设置为自己的真实姓名,给按钮添加事件监听器,要求当点击查询按钮时,控制台打印输出:“恭喜您通过考试!”
时间: 2023-11-26 12:03:51 浏览: 27
很高兴为您提供帮助。以下是一个示例代码,实现了您的要求:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>您的真实姓名</title>
</head>
<body>
<h1>考试成绩查询系统</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name"><br>
<label for="id">学号:</label>
<input type="text" id="id"><br>
<button type="button" id="queryBtn">查询</button>
</form>
<script>
const queryBtn = document.querySelector('#queryBtn');
queryBtn.addEventListener('click', function() {
console.log('恭喜您通过考试!');
});
</script>
</body>
</html>
```
在上述代码中,我们使用了 HTML 表单元素来实现用户输入姓名和学号的功能,并添加了一个按钮元素来触发查询操作。通过 JavaScript 代码,我们为按钮元素添加了一个 `click` 事件监听器,在监听器函数中输出了指定的文本信息到控制台。您可以将其中的“您的真实姓名”替换为您自己的姓名,以便窗口标题显示正确的信息。另外,您还可以根据需要对界面进行样式调整,以满足您的需求。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)