2. it技术
  3. 用JavaScript完成简单的计算器功能

用JavaScript完成简单的计算器功能

it2023-04-02  70

目录

JavaScript计算功能代码运行效果

JavaScript计算功能

代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> h1 { padding-left: 200px; } </style> </head> <body> <h1>计算器</h1> <input type="text" id="num1" placeholder="请输入第一个数字" /> <!-- 下拉菜单 --> <select id="operator"> <option value="isFalse">请选择运算符</option> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" id="num2" placeholder="请输入第二个数字" /> <input type="button" value="计算" onclick="count()" /><br /> <span>计算结果:</span><span id="show"></span> <!-- JavaScript样式 --> <script> function count() { // 获取文本框输入的数字 var num1 = document.getElementById("num1").value; // 获取第一个数字 var num2 = document.getElementById("num2").value; // 获取第二个数字 // 获取下拉菜单选取的内容 var operatorID = document.getElementById("operator"); var index = operatorID.selectedIndex; var operator = operatorID.options[index].value; // 判断是否为数字 var isNumber = isNaN(num1) || isNaN(num2); // 定义判断加减乘除的条件 var isAdd = (operator == "+" && !isNumber); // 加法 var isSubtract = (operator == "-" && !isNumber); // 减法 var isMultiply = (operator == "*" && !isNumber); // 乘法 var isDivideBy = (operator == "/" && !isNumber); // 除法 var isSelect = operator == ("isFalse"); // 判断加减乘除和文本框输入的内容 if(isAdd) { // 加法 var num = Number(num1) + Number(num2); num = num.toFixed(2); document.getElementById("show").innerText = num;//写入到id为show的节点中 } else if(isSubtract) { // 减法 var num = Number(num1) - Number(num2); num = num.toFixed(2); document.getElementById("show").innerText = num;//写入到id为show的节点中 } else if(isMultiply) { // 乘法 var num = Number(num1) * Number(num2); num = num.toFixed(2); document.getElementById("show").innerText = num;//写入到id为show的节点中 } else if(isDivideBy) { // 除法 if(num2 == 0) { // 除数不能为0 alert("除数不能为0"); } else { var num = Number(num1) / Number(num2); num = num.toFixed(2); document.getElementById("show").innerText = num;//写入到id为show的节点中 } } else if(isSelect) { // 如果没有选择，则弹出请选择运算符 alert("请选择运算符！！！"); } else if(isNumber) { // 如果输入的不是数字，弹出请输入数字 alert("请输入数字！！！"); } } </script> </body> </html>

运行效果

点击之后

加法 减法 乘法 除法 当除数为0时：

当除数不为0： 输入的不是数字之后

最新回复(0)