首页js四则运算计算器

js四则运算计算器

时间: 2023-07-23 12:20:59 浏览: 116

好的，我可以帮您实现一个简单的JS四则运算计算器。以下是实现的代码： ```html <!DOCTYPE html> <html> <head> <title>JS四则运算计算器</title> <meta charset="utf-8"> </head> <body> <h1>JS四则运算计算器</h1> <form> <input type="text" id="num1" placeholder="请输入第一个数字" required> <select id="operator"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" id="num2" placeholder="请输入第二个数字" required> <input type="submit" value="计算"> </form> <p>计算结果为：<span id="result"></span></p> <script> // 获取表单元素和结果元素 var form = document.querySelector('form'); var resultElement = document.querySelector('#result'); // 监听表单提交事件 form.onsubmit = function(event) { event.preventDefault(); // 阻止表单提交的默认行为 // 获取表单数据 var num1 = parseFloat(document.querySelector('#num1').value); var operator = document.querySelector('#operator').value; var num2 = parseFloat(document.querySelector('#num2').value); // 根据运算符计算结果 var result; switch (operator) { case '+': result = num1 + num2; break; case '-': result = num1 - num2; break; case '*': result = num1 * num2; break; case '/': result = num1 / num2; break; } // 显示计算结果 resultElement.textContent = result; }; </script> </body> </html> ``` 您可以将上述代码复制到一个HTML文件中，然后用浏览器打开这个文件，即可看到一个简单的JS四则运算计算器。

阅读全文