在浏览器中弹出两个输入框,分别输入你的姓名和学号,并将姓名和学号显示在页面上
时间: 2024-09-09 16:03:34 浏览: 58
JS实现在网页中弹出一个输入框的方法
在浏览器中实现弹出两个输入框,并输入姓名和学号,然后将输入的信息显示在页面上的操作,可以通过HTML、CSS和JavaScript来完成。以下是一个简单的示例代码,实现了这个需求:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>输入姓名和学号</title>
<script>
function inputNameAndNumber() {
var name = document.getElementById('name').value;
var number = document.getElementById('number').value;
document.getElementById('display').innerHTML = '姓名: ' + name + '<br>学号: ' + number;
}
</script>
</head>
<body>
<h2>请输入您的姓名和学号:</h2>
<!-- 创建两个输入框 -->
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="number" placeholder="请输入学号">
<!-- 创建一个按钮,点击时执行函数 -->
<button onclick="inputNameAndNumber()">显示信息</button>
<!-- 用于显示结果的标签 -->
<p id="display"></p>
</body>
</html>
```
这段代码首先在HTML中定义了两个`input`元素,用于输入姓名和学号,以及一个按钮用于触发显示信息的操作。JavaScript函数`inputNameAndNumber`通过`document.getElementById`获取用户输入的姓名和学号,然后将它们显示在页面上。
阅读全文