html加法计算器并且有重置按钮
时间: 2023-10-20 15:31:58 浏览: 120
以下是一个具有重置功能的HTML加法计算器的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>加法计算器</title>
</head>
<body>
<h1>加法计算器</h1>
<form>
<p>
<label for="num1">第一个数:</label>
<input type="number" id="num1" name="num1">
</p>
<p>
<label for="num2">第二个数:</label>
<input type="number" id="num2" name="num2">
</p>
<button type="button" onclick="add()">计算</button>
<button type="button" onclick="resetForm()">重置</button>
<p>
<label for="result">结果:</label>
<output id="result" name="result"></output>
</p>
</form>
<script>
function add() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").value = result;
}
function resetForm() {
document.getElementById("num1").value = "";
document.getElementById("num2").value = "";
document.getElementById("result").value = "";
}
</script>
</body>
</html>
```
这个加法计算器在原有的基础上增加了一个“重置”按钮,用于清空用户输入并将计算结果清空。当用户点击“重置”按钮时,JavaScript函数resetForm()会被调用,将两个输入框和输出框的值都设为空字符串。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)