jquery制作简单计算器_基于calc-jquery.html,修改js代码基础功能要求:按下“计算”按钮后,计算结果显示-CSDN博客

本文链接：https://blog.csdn.net/doubeizhucele/article/details/9673693

<!DOCTYPE html>
<html>
        <head>
                <style>
                        input {width:35px;height:30px;border-right: 1px solid;}
                </style>
                <script src="jquery.min.js"></script>
                <script>
                        var num1="0";
                        var num2="0";
                        var result="0";
                        var op="";

                        function init(){
                                        num1 = "0";
                                        op = "";
                                        num2 = "0";
                        }

                        $(document).ready(function(){
                          $("input.num").click(function(){
                                  var reg = /^0/;
                                  if((op=="")&&(num2=="0")){
                                          num1 += this.value;
                                                if(reg.test(num1)) num1 = num1.substring(1);
                                          document.getElementById("value").value = num1;
                                  }else if(op!=null||op!=""){
                                          num2 += this.value;
                                          if(reg.test(num2)) num2 = num2.substring(1);
                                          document.getElementById("value").value = num2;
                                  }

                          });
                          $("input.oper").click(function(){
                                  op = this.value;
                                  document.getElementById("value").value = op;
                          });
                          $("input.singleoper").click(function(){
                                  var operTxt = this.value;
                                  var reg = /^\-/;
                                  if(operTxt=="±"){
                                          if(num1=="0"){
                                                  num1 == "0"
                                          }else if(reg.test(num1)){
                                                  num1 = num1.substring(1);
                                          }else{
                                                  num1 = "-"+num1;
                                          }
                                  }else if(operTxt=="1/x"){
                                          num1 = 1 / num1;
                                  }
                                  document.getElementById("value").value = num1;
                          });
                          $("input.backone").click(function(){
                                        if(num1!="0"&&num2=="0"){
                                                var len = num1.length;
                                                if(len==1){
                                                        num1 = "0";
                                                }else{
                                                        num1 = num1.substring(0,len-1);
                                                }
                                                document.getElementById("value").value = num1;
                                        }else if(num2!=""&&num2!=null){
                                                var len = num2.length;
                                                if(len==1){
                                                        num2 = "0";
                                                }else{
                                                        num2 = num2.substring(0,len-1);
                                                }
                                                document.getElementById("value").value = num2;
                                        }
                          });
                          $("input#clear").click(function(){
                                        document.getElementById("value").value = 0;
                                        init();
                          });
                          $("input.nofun").click(function(){
                                        alert("未开发");
                          });
                          $("input#square").click(function(){
                                        num1 = Math.sqrt(num1);
                                        document.getElementById("value").value = num1;
                          });
                          $("input#clearnum").click(function(){
                                  //alert("num1>>"+num1);
                                  //alert("num2>>"+num2);
                                        if(op==null||op==""){
                                                num1 = "0";
                                                document.getElementById("value").value = num1;
                                        }else if(!isNaN(document.getElementById("value").value)){
                                                num2 = "0";
                                                document.getElementById("value").value = num2;
                                        }
                          });
                          $("input#calc").click(function(){
                                        result = eval(num1+op+num2);
                                        document.getElementById("value").value = result;
                                        init();
                                        num1 = String(result);
                          });

                        });
                </script>
        </head>
        <body>
                <div style="width:175px;height:150px;">
                        <div><input type="text" id="value" value="0" style="width:100%;text-align:right;font-size:20px;"></div>
                        <div><input type="button" class="nofun" value="MC"><input type="button" class="nofun" value="MR"><input type="button" class="nofun" value="MS"><input type="button" id="mplus" class="nofun" value="M+"><input type="button" class="nofun" value="M-"></div>
                        <div><input type="button" class="backone" value="←"><input type="button" id="clearnum" value="CE"><input type="button" id="clear" value="C"><input type="button" class="singleoper" id="opposite" value="±"><input type="button" id="square" value="√"></div>
                        <div><input type="button" class="num" id="num7" value="7"><input type="button" class="num" id="num8" value="8"><input type="button" class="num" id="num9" value="9"><input type="button" class="oper" id="devide" value="/"><input type="button" class="nofun" value="%"></div>
                        <div><input type="button" class="num" id="num4" value="4"><input type="button" class="num" id="num5" value="5"><input type="button" class="num" id="num6" value="6"><input type="button" class="oper" id="multiply" value="*"><input class="singleoper" type="button" id="reciprocal" value="1/x"></div>
                        <div style = "float:left;">
                                <div><input type="button" class="num" id="num1" value="1"><input type="button" class="num" id="num2" value="2"><input type="button" class="num" id="num3" value="3"><input type="button" class="oper" id="minus" value="-"></div>
                                <div><input type="button" class="num" id="num0" value="0" style="width:70px"><input type="button" class="num" id="dot" value="."><input type="button" class="oper" id="plus" value="+"></div>
                        </div>
                        <div style = "float:left;">
                                <input type="button" id="calc" value="=" style="height:60px;">
                        </div>
                <div>
        </body>
</html>