“简单加法器”案例,要求在页面中弹出两个输入框,分别输入两个数字,然后返回两个数字相加的结果。
时间: 2024-09-19 08:01:04 浏览: 30
基础电子中的两个48位输入按位逻辑运算
在前端Web开发中,我们可以创建一个简单的加法器示例来演示这个功能。这里以HTML、JavaScript为基础:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>简单加法器</title>
</head>
<body>
<label for="number1">Number 1:</label>
<input type="number" id="number1" placeholder="请输入第一个数字">
<br><br>
<label for="number2">Number 2:</label>
<input type="number" id="number2" placeholder="请输入第二个数字">
<br><br>
<button onclick="addNumbers()">计算</button>
<p id="result"></p>
<script>
function addNumbers() {
const num1 = document.getElementById("number1").value;
const num2 = document.getElementById("number2").value;
if (num1 && num2) {
const sum = parseInt(num1) + parseInt(num2);
document.getElementById("result").innerText = `结果: ${sum}`;
} else {
alert("请输入有效的数字!");
}
}
</script>
</body>
</html>
```
在这个例子中,我们创建了两个输入框让用户输入数字,点击“计算”按钮后,`addNumbers()`函数会被触发。它获取用户输入的数值并相加,结果显示在页面底部的段落标签里。如果输入框为空,会弹出提示框告知用户输入有效数字。
阅读全文