首页用js写一个简易的计算器

用js写一个简易的计算器

时间: 2023-11-18 13:04:51 浏览: 108

js实现简单计算器

一个简洁的网页JS计算器，附详细代码释义。通过下边的效果演示就可以看到，这是一个挺小的js网页计算器，界面美化的我想还是不错的，毕竟在没有使用任何图片修饰的情况下，很好看，而且功能挺实用，可以完成基本的数学算数运算。

好的，以下是一个用 JavaScript 编写的简易计算器： ```html <!DOCTYPE html> <html> <head> <title>简易计算器</title> </head> <body> <input type="text" id="num1"> <input type="text" id="num2"> <br><br> <button onclick="add()">+</button> <button onclick="subtract()">-</button> <button onclick="multiply()">*</button> <button onclick="divide()">/</button> <br><br> <p>结果：</p> <p id="result"></p> <script> function add() { var num1 = parseFloat(document.getElementById("num1").value); var num2 = parseFloat(document.getElementById("num2").value); var result = num1 + num2; document.getElementById("result").innerHTML = result; } function subtract() { var num1 = parseFloat(document.getElementById("num1").value); var num2 = parseFloat(document.getElementById("num2").value); var result = num1 - num2; document.getElementById("result").innerHTML = result; } function multiply() { var num1 = parseFloat(document.getElementById("num1").value); var num2 = parseFloat(document.getElementById("num2").value); var result = num1 * num2; document.getElementById("result").innerHTML = result; } function divide() { var num1 = parseFloat(document.getElementById("num1").value); var num2 = parseFloat(document.getElementById("num2").value); if (num2 == 0) { alert("不能除以0！"); } else { var result = num1 / num2; document.getElementById("result").innerHTML = result; } } </script> </body> </html> ``` 以上代码创建了两个文本框用于输入两个数字，四个按钮分别代表加、减、乘、除四种运算，以及一个用于显示结果的段落。通过 JavaScript 的四个函数实现四种运算，将结果显示在页面上。需要注意的是，在除法运算中需要判断除数是否为0，如果为0需要给出警告。

阅读全文