用prompt输入框输入姓名年龄性别并用alert显示,并交换俩位同学的年龄
时间: 2024-09-11 20:16:41 浏览: 43
使用window.prompt()实现弹出用户输入的对话框
要实现这个功能,你可以使用HTML的`<input>`标签来创建输入框,JavaScript来处理输入的数据,并用`alert`函数显示输入的信息。同时,你可以通过创建一个函数来交换两个同学的年龄信息。
以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交换年龄示例</title>
<script>
function displayInfoAndSwap() {
// 获取输入框中的值
var name1 = document.getElementById('name1').value;
var age1 = parseInt(document.getElementById('age1').value, 10);
var gender1 = document.getElementById('gender1').value;
var name2 = document.getElementById('name2').value;
var age2 = parseInt(document.getElementById('age2').value, 10);
var gender2 = document.getElementById('gender2').value;
// 显示学生信息
alert("第一个同学的信息:姓名:" + name1 + ",年龄:" + age1 + ",性别:" + gender1);
alert("第二个同学的信息:姓名:" + name2 + ",年龄:" + age2 + ",性别:" + gender2);
// 交换年龄
var tempAge = age1;
age1 = age2;
age2 = tempAge;
// 再次显示交换后的年龄信息
alert("交换年龄后的信息:");
alert("第一个同学的年龄:" + age1);
alert("第二个同学的年龄:" + age2);
}
</script>
</head>
<body>
<form>
<label for="name1">姓名1:</label>
<input type="text" id="name1" name="name1"><br><br>
<label for="age1">年龄1:</label>
<input type="text" id="age1" name="age1"><br><br>
<label for="gender1">性别1:</label>
<input type="text" id="gender1" name="gender1"><br><br>
<label for="name2">姓名2:</label>
<input type="text" id="name2" name="name2"><br><br>
<label for="age2">年龄2:</label>
<input type="text" id="age2" name="age2"><br><br>
<label for="gender2">性别2:</label>
<input type="text" id="gender2" name="gender2"><br><br>
<input type="button" value="显示并交换年龄" onclick="displayInfoAndSwap()">
</form>
</body>
</html>
```
在这段代码中,我们首先通过`document.getElementById()`方法获取每个输入框的值。然后,我们使用`alert`函数来显示两位同学的信息。接着,我们通过创建一个临时变量`tempAge`来交换两个年龄变量的值。最后,我们再次使用`alert`函数来显示交换年龄后的结果。
阅读全文