首页form表单输入四则运算

form表单输入四则运算

时间: 2024-09-30 10:03:42 浏览: 25

在网页设计中，form表单通常用于收集用户输入的数据，包括进行简单的四则运算。通过HTML、CSS和JavaScript，可以创建一个动态的表单让用户输入两个操作数和运算符，然后提交到服务器进行处理。以下是一个基本的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>四则运算</title> <style> .result { margin-top: 10px; } </style> </head> <body> <label for="num1">第一个数字:</label> <input type="number" id="num1" name="num1"><br> <label for="operator">运算符(+,-,*,/):</label> <select id="operator" name="operator"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select><br> <label for="num2">第二个数字:</label> <input type="number" id="num2" name="num2"><br> <button onclick="calculate()">计算结果</button> <div class="result" id="result"></div> <script> function calculate() { const num1 = parseFloat(document.getElementById('num1').value); const num2 = parseFloat(document.getElementById('num2').value); const operator = document.getElementById('operator').value; let result; switch (operator) { 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}`; } </script> </body> </html> ``` 在这个例子中，当用户点击“计算结果”按钮，JavaScript函数会获取用户输入的数值和运算符，然后根据选择的运算符进行相应的计算，并显示结果。

阅读全文