设计一个加法计算器页面,请编写程序完成页面设计和制作。具体要求如下: (1)根据页面效果,完成页面内容设计。在表单中从上到下依次加入“加数1:”和一个id值为num1的单行文本输入框、“加数2:”和一个id值为num2的单行文本输入框、“和:”和一个id值为res且默认值为空的单行文本输入框、一个“计算”按钮和一个“重置”按钮,域标题为加法计算器。 (2)定义一个JavaScript函数,通过调用该函数能够完成此加法运算。
时间: 2024-03-16 22:47:24 浏览: 64
下面是一个简单的加法计算器页面的设计和制作,满足您的要求:
```
<!DOCTYPE html>
<html>
<head>
<title>加法计算器</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form>
<fieldset>
<legend>加法计算器</legend>
<label for="num1">加数1:</label>
<input type="text" id="num1" name="num1"><br>
<label for="num2">加数2:</label>
<input type="text" id="num2" name="num2"><br>
<label for="res">和:</label>
<input type="text" id="res" name="res" value=""><br>
<input type="button" value="计算" onclick="addNumbers()">
<input type="reset" value="重置">
</fieldset>
</form>
<script>
function addNumbers() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var res = num1 + num2;
document.getElementById("res").value = res;
}
</script>
</body>
</html>
```
该页面包含一个表单,其中包含三个单行文本输入框分别用于输入两个加数和计算结果,以及一个“计算”按钮和一个“重置”按钮。当用户点击“计算”按钮时,JavaScript函数 `addNumbers()` 会获取输入的加数并进行加法运算,结果会显示在“和”文本框中。当用户点击“重置”按钮时,所有输入框的值将被重置为空。
阅读全文