首页编写html页面，两个文本框用于输入数据，四个按钮用来完成加减乘除运算，最后一个文本框显示计算结果，编写calc函数，获取并转换输入的数据，判断，不合法给出提示，调用指定函数完成相关计算，编写函数，实现加减乘除

编写html页面，两个文本框用于输入数据，四个按钮用来完成加减乘除运算，最后一个文本框显示计算结果，编写calc函数，获取并转换输入的数据，判断，不合法给出提示，调用指定函数完成相关计算，编写函数，实现加减乘除

时间: 2024-12-19 19:28:40 浏览: 5

创建一个HTML页面，包含两个输入文本框用于输入数字，四个操作按钮（分别代表加、减、乘、除），以及一个区域显示计算结果，可以这样实现： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>简单计算器</title> <style> .result { margin-top: 10px; font-weight: bold; } </style> </head> <body> <label for="num1">Number 1:</label> <input type="number" id="num1" required><br> <label for="num2">Number 2:</label> <input type="number" id="num2" required><br> <button onclick="calc('+')">+</button> <button onclick="calc('-')">-</button> <button onclick="calc('*')">*</button> <button onclick="calc('/')">/</button> <div class="result" id="result"></div> <script> function calc(operation) { const num1 = parseFloat(document.getElementById('num1').value); const num2 = parseFloat(document.getElementById('num2').value); if (isNaN(num1) || isNaN(num2)) { alert("请输入有效的数字！"); return; } let result; switch (operation) { case '+': result = num1 + num2; break; case '-': result = num1 - num2; break; case '*': result = num1 * num2; break; case '/': if (num2 !== 0) { result = num1 / num2; } else { alert("除数不能为零！"); return; } break; default: alert("无效的操作符！"); return; } document.getElementById('result').innerText = `Result: ${result}`; } </script> </body> </html> ``` 在这个示例中，`calc` 函数负责获取输入框中的数值，验证输入是否为数字，然后根据操作符调用相应的算术运算，并将结果显示在结果文本框里。如果输入有误或遇到除以零的情况，会弹出警告。

阅读全文