要求在页面中弹出两个输入框,分别输入两个数字,然后返回两个数字相加的结果。(使用JavaScript编写)
时间: 2024-09-30 07:06:47 浏览: 57
jsp页面同时弹出页面和对话框
4星 · 用户满意度95%
要在HTML页面中使用JavaScript实现这个功能,你可以创建一个简单的表单,包含两个输入字段用于输入数字,以及一个按钮触发计算。下面是示例代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字相加</title>
</head>
<body>
<h2>请输入两个数字:</h2>
<input type="number" id="num1" placeholder="第一个数字"><br>
<input type="number" id="num2" placeholder="第二个数字"><br>
<button onclick="calculateSum()">点击计算</button>
<p id="result"></p>
<script>
function calculateSum() {
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
if (isNaN(num1) || isNaN(num2)) {
alert("请输入有效数字!");
return;
}
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('result').innerText = "结果是: " + sum;
}
</script>
</body>
</html>
```
在这个例子中,用户可以在`num1`和`num2`输入框中输入数字,点击“计算”按钮后,`calculateSum`函数会被触发。它首先获取输入值并检查是否为数字。如果不是,则显示警告;如果是,则将两个数字相加,并将结果显示在页面上,id为`result`的段落元素内。
阅读全文