设计一个加法计算器页面,请编写程序完成页面设计和制作。具体要求如下: (1)根据页面效果,完成页面内容设计。在表单中从上到下依次加入“加数1:”和一个id值为num1的单行文本输入框、“加数2:”和一个id值为num2的单行文本输入框、“和:”和一个id值为res且默认值为空的单行文本输入框、一个“计算”按钮和一个“重置”按钮,域标题为加法计算器。(2)定义一个JavaScript函数,通过调用该函数能够完成此加法运算。
时间: 2024-03-16 14:47:53 浏览: 55
以下是一个简单的加法计算器页面,包括HTML和JavaScript代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>加法计算器</title>
</head>
<body>
<form>
<fieldset>
<legend>加法计算器</legend>
<label for="num1">加数1:</label>
<input type="text" id="num1"><br>
<label for="num2">加数2:</label>
<input type="text" id="num2"><br>
<label for="res">和:</label>
<input type="text" id="res" value=""><br>
<button type="button" onclick="calculate()">计算</button>
<button type="reset">重置</button>
</fieldset>
</form>
<script>
function calculate() {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var res = document.getElementById('res');
if (!isNaN(num1) && !isNaN(num2)) {
res.value = num1 + num2;
} else {
res.value = '';
}
}
</script>
</body>
</html>
```
该页面包括一个HTML表单,其中包括两个输入框(id为num1和num2)和一个输出框(id为res),以及一个计算按钮和一个重置按钮。JavaScript代码包括一个名为calculate的函数,该函数在点击计算按钮时被调用,从输入框中获取加数1和加数2的值,并通过parseFloat函数将它们转换为浮点数。然后,该函数将两个数相加,并将结果写入输出框中。如果输入框中的值无法转换为数字,则输出框中的值将保持为空。
阅读全文