首页html加法计算器并且有重置按钮

html加法计算器并且有重置按钮

时间: 2023-10-20 20:31:58 浏览: 158

以下是一个具有重置功能的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()会被调用，将两个输入框和输出框的值都设为空字符串。

阅读全文