JavaScript简易计算器_javascript简易计算器eval-CSDN博客

本文链接：https://blog.csdn.net/m0_67268069/article/details/128076912
JavaScript制作简易计算器
运行结果：
代码：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简易计算器</title>
    <style>
      table {
        width: 300px;
        margin: 0px auto;
        background-color: lightgrey;
        border-spacing: 5px;
      }
      table td {
        text-align: center;
      }
      input[type="button"] {
        width: 40px;
        height: 40px;
      }
      input[type="text"] {
        width: 90%;
      }
    </style>
  </head>
  <body>
    <script>
      // 初始化计算器页面
      let s =
        '<table><tr><td colspan="4"><input type="text" id="num" readonly/></td></tr>';
      let textArr = [
        ["+", "-", "*", "/"],
        ["1", "2", "3", "4"],
        ["5", "6", "7", "8"],
        ["9", "0", "=", "C"],
        ["pi", "e", "sqrt", "1/x"],
        ["sin", "cos", "tan", "asin"],
      ];
      for (let row of textArr) {
        s += "<tr>";
        for (let col of row) {
          s += '<td><input type="button" name="btn" value="' + col + '"></td>';
        }
        s += "</tr>";
      }
      s += "</table>";
      document.write(s);


      //事件处理程序
      //得到按钮和文本框对象

      let num = document.getElementById("num");
      let btn = document.getElementsByName("btn"); //按钮的类数组
      //定义表达式字符串
      let expression = "";
      let isSecondNum = false;
      //为按钮添加事件处理程序
      for (let i = 0 ; i < btn.length; i++){
        let curBtu = btn[i];  //
        curBtu.addEventListener("click",function(){
            //
            let text = this.value;
            if (text == "C"){
                num.value = "";
                expression = "";
                isSecondNum = false;


            } else if(text == "0") {
				num.value += 0;
                expression += 0;
            } else if(text == "1") {
                num.value += 1;
                expression += 1;
            } else if(text == "2") {
				num.value += 2;
                expression += 2;
            } else if(text == "3") {
				num.value += 3;
                expression += 3;                    
			} else if(text == "4") {
				num.value += 4;
                expression += 4;                    
			} else if(text == "5") {
				num.value += 5;
                expression += 5;                    
			} else if(text == "6") {
				num.value += 6;
                expression += 6;                    
			} else if(text == "6") {
				num.value += 6;
                expression += 6;                    
			} else if(text == "7") {
				num.value += 7;
                expression += 7;                    
			} else if(text == "8") {
				num.value += 8;
                expression += 8;                    
			} else if(text == "9") {
				num.value += 9;
                expression += 9;
                
            } else if(text == "+") {
				num.value += "+";
                expression += "+";                    
			} else if(text == "-") {
				num.value += "-";
                expression += "-";                    
			} else if(text == "/") {
				num.value += "/";
                expression += "/";
            }else if(text == "*"){
                num.value = "*";
                expression += "*";
                                
			    

					
            } else if(text == "pi"){
                num.value = Math.PI;
                expression += Math.PI;
            } else if(text == "e"){
                num.value = Math.E;
                expression += Math.E;

           

            }else if(text == "sqrt"){
                let temp = Number(num.value) && parseFloat(num.value);
                if(isNaN(temp)){
                    alert("当前操作数无法求平方根！")
                } else{
                    expression = "Math.sqrt(" + num.value + ")"
                }
                
            }else if(text == "1/x"){
                let temp = Number(num.value) && parseFloat(num.value);
                if(isNaN(temp)){
                    alert("当前操作数无法求平方根！")
                } else{
                    expression = "(" + 1/num.value + ")"
                }

            }else if(text == "sin"){
                let temp = Number(num.value) && parseFloat(num.value);
                if(isNaN(temp)){
                    alert("当前操作数无法求sin！")
                } else{
                    expression = "Math.sin(" + num.value + ")"
                }
            }else if(text == "cos"){
                let temp = Number(num.value) && parseFloat(num.value);
                if(isNaN(temp)){
                    alert("当前操作数无法求cos！")
                } else{
                    expression = "Math.cos(" + num.value + ")"
                }
            }else if(text == "tan"){
                let temp = Number(num.value) && parseFloat(num.value);
                if(isNaN(temp)){
                    alert("当前操作数无法求tan！")
                } else{
                    expression = "Math.tan(" + num.value + ")"
                }

            }else if(text == "asin"){
                let temp = Number(num.value) && parseFloat(num.value);
                if(isNaN(temp)){
                    alert("当前操作数无法求asin！")
                } else{
                    expression = "Math.asin(" + num.value + ")"
                }


            }/ 此处lese if
            
             //完成计算
            if(
                ["=", "sqrt","1/x","sin","cos","tan","asin"].includes(text)
            ){
                num.value = eval(expression) == "undefined"?"":eval(expression);
                expression = num.value + "";

            }
        })
      }

      
    </script>
  </body>
</html>