设计网页,用JavaScript实现: 1)表单中,输入两个两位数的学号,其中有一个为你的学号最后2位 2)单击按钮,在页面显示学号和学号运算信息
时间: 2024-09-25 08:20:41 浏览: 39
PHP+JavaScript+HTML实现注册界面表单及日历控件1
设计一个简单的HTML表单并结合JavaScript实现这个功能,可以按照以下步骤进行:
1. 首先,创建一个HTML结构,包括两个输入框(用于输入学号),一个按钮(点击后触发事件),以及一个用于显示结果的元素(如段落或`<p>`标签)。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>学号运算</title>
</head>
<body>
<label for="studentNumber1">学生编号1:</label>
<input type="text" id="studentNumber1" oninput="validateInput(this)">
<label for="studentNumber2">学生编号2 (请输入最后两位):</label>
<input type="text" id="studentNumber2" oninput="validateInput(this)">
<button onclick="calculateStudentNumbers()">计算</button>
<p id="result"></p>
<script src="script.js"></script>
</body>
</html>
```
2. 创建一个名为`script.js`的外部文件,添加JavaScript代码来处理表单输入和计算:
```javascript
// JavaScript部分
function validateInput(inputElement) {
// 验证输入是否是两位数字
if (!/^\d{2}$/.test(inputElement.value)) {
inputElement.setCustomValidity("请输入两位数字");
} else {
inputElement.setCustomValidity("");
}
}
function calculateStudentNumbers() {
const studentNumber1 = parseInt(document.getElementById('studentNumber1').value);
const studentNumber2 = parseInt(document.getElementById('studentNumber2').value);
// 确保输入有效
if (!isNaN(studentNumber1) && !isNaN(studentNumber2)) {
let sum = studentNumber1 + studentNumber2;
document.getElementById('result').textContent = `学号1: ${studentNumber1}, 学号2: ${studentNumber2}, 运算结果: ${sum}`;
} else {
document.getElementById('result').textContent = "请输入有效的学号";
}
}
```
在这个例子中,当用户输入结束后,会自动验证输入是否为两位数字,并在点击“计算”按钮时,计算两个学号的和并在结果区域显示。如果输入无效,将显示错误提示信息。
阅读全文