设计网页,用JavaScript实现: 1)表单中,输入两个两位数的学号,其中有一个为你的学号最后2位 2)单击按钮,在页面显示学号和学号运算信息,如图所示 3)计算结果显示红色
时间: 2024-10-09 08:11:38 浏览: 36
在JavaScript中设计一个包含上述功能的网页,你可以使用HTML、CSS以及JavaScript来实现。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>学号运算</title>
<style>
.result {
color: red;
}
</style>
</head>
<body>
<form id="studentForm">
<label for="num1">请输入第一个学号(前八位忽略):</label>
<input type="text" id="num1" required>
<label for="num2">请输入第二个学号(前八位忽略,作为参考):</label>
<input type="text" id="num2" required>
<button onclick="displayResult()">点击计算</button>
</form>
<p id="result"></p>
<script>
function displayResult() {
const num1 = parseInt(document.getElementById('num1').value);
const num2 = parseInt(document.getElementById('num2').value);
// 假设用户输入的都是两位数
if (isNaN(num1) || isNaN(num2) || num1 < 10 || num1 > 99 || num2 < 10 || num2 > 99) {
alert("请输入有效的两位数学号");
return;
}
// 计算学号差值并显示结果
const difference = Math.abs(num1 - num2);
document.getElementById('result').innerText = `您的学号(${num1})与参考学号(${num2})的差值是: ${difference}`;
// 标记结果显示为红色
document.getElementById('result').classList.add('result');
}
</script>
</body>
</html>
```
在这个示例中,用户可以输入两个学号,然后点击“点击计算”按钮。页面会显示这两个学号之间的差值,并将结果显示为红色。请注意,这个例子假设了输入始终是两位数字,如果需要更复杂的验证,可以根据实际需求添加更多的错误处理。
阅读全文