首页HTML和js实现简易计算器

HTML和js实现简易计算器

时间: 2024-05-05 14:19:50 浏览: 81

用 js+html 实现一个简易版的计算器

5星 · 资源好评率100%

使用js + html 实现的简易版的网页计时器，虽然简洁，但是小巧，它能进行加、减、乘、除运算，并且可以对小数、负数、带括号的三个数以上的式子进行运算，当然回退和归零功能也是必备的，还可以设置主题皮肤，代码非常精炼，总代码量不足200行，核心js代码不足100行，实现非常简单，适合初学者参考。

好的，以下是一个简单的HTML和JavaScript实现的计算器： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简易计算器</title> </head> <body> <h1>简易计算器</h1> <input type="text" id="num1"> <select id="operator"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" id="num2"> <button onclick="calculate()">计算</button> <br> <br> <p id="result"></p> <script> function calculate() { var num1 = parseFloat(document.getElementById("num1").value); var num2 = parseFloat(document.getElementById("num2").value); var operator = document.getElementById("operator").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; } document.getElementById("result").innerHTML = "结果：" + result; } </script> </body> </html> ``` 该计算器包含两个输入框和一个下拉框，用户可以选择四种操作符进行计算。点击“计算”按钮后，JavaScript函数将获取输入的值和操作符，执行相应的计算，并将结果显示在页面上。

阅读全文