JS的简单计算器

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>计算器

</title>
       <script>
           var fuhao =""; //定义一个运算符号
           var zuobian =""; //定义第一个变量
           var youbian =""; //定义第二个变量
           var result =0; //给输出结果一个定义
           function czFuhao(fh){    // 给操作符合一个定义函数，参数为fh
               fuhao=fh;    //把参数给运算符号
           }
           function dianjishuzi(num){   //定义一个点击数字的函数
               var txt=num.toString();    //把数字转化为字符串
               if (fuhao=="") {
                   zuobian=zuobian+txt;
                   document.getElementById("show").value=zuobian;    //通过id元素show输出数值
               } else {
                   youbian=youbian+txt;
                   document.getElementById("show").value=youbian;
               }
           }
           function dian(){   //定义一个小数点的函数
               if (fuhao=="") {
                   zuobian=zuobian+".";
                   document.getElementById("show").value=zuobian;
               } else {
                   youbian=youbian+".";
                   document.getElementById("show").value=youbian;
               }
           }
               function jisuan(){    //定义函数基本的加减乘除计算
                   if (fuhao=="+") {
                       result=Number(zuobian)+Number(youbian);    //用Number将左右两边的数转化为数值
                       document.getElementById("show").value=result;
                   }else if(fuhao=="-"){
                       result=Number(zuobian)-Number(youbian);
                       document.getElementById("show").value=result;
                   }else if(fuhao=="*"){
                       result=Number(zuobian)*1000*Number(youbian);    //计算机中默认为小数点后三位数，首先让其成为整数，最后让结果回位
                       result=result/1000;
                       document.getElementById("show").value=result;
                   }else if(fuhao=="/"){
                       result=Number(zuobian)/Number(youbian);
                       document.getElementById("show").value=result;
                   }else if(fuhao=="%"){
                       result=Number(zuobian)%Number(youbian);
                       document.getElementById("show").value=result;
                   }else{
                        document.getElementById("show").value="错误，你还没有选择运算符号！";
                    }
               }
               function clearAC(){   //定义清除数据的函数
               fuhao ="";
               zuobian ="";
               youbian ="";    //所有数据为空
               document.getElementById("show").value = "";
               document.getElementById("result").value = "";
                }
       </script>
   </head>
   <body>
       <h1 align="center">计算器</h1>
       <table width="270px"height="340px"border="1px"cellpadding="8px"cellspacing="0px"align="center">   
           <tr>
               <td colspan="4" align="center"><input type="text" id="show" style="width: 220px;height: 60px;margin: 10px;font-size: 30px;"/></td>
           </tr>
           <tr>
               <td><input type="button" style="color: red;width: 50px;height: 40px;" value="C" onclick="clearAC()"/></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="/" onclick="czFuhao('/')" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="*" onclick="czFuhao('*')" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="←" onclick="shanchu()" /></td>
           </tr>
           <tr>
               <td><input type="button" style="width: 50px;height: 40px;" value="7" onclick="dianjishuzi(7)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="8" onclick="dianjishuzi(8)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="9" onclick="dianjishuzi(9)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="-" onclick="czFuhao('-')" /></td>
           </tr>
           <tr>
                <td><input type="button" style="width: 50px;height: 40px;" value="4" onclick="dianjishuzi(4)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="5" onclick="dianjishuzi(5)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="6" onclick="dianjishuzi(6)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="+" onclick="czFuhao('+')" /></td>
           </tr>
           <tr>
                <td><input type="button" style="width: 50px;height: 40px;" value="1" onclick="dianjishuzi(1)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="2" onclick="dianjishuzi(2)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="3" onclick="dianjishuzi(3)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="%" onclick="czFuhao('%')" /></td>
           </tr>
           <tr>
                <td colspan="2" align="center"><input type="button" style="width: 118px;height: 40px;" value="0" onclick="dianjishuzi(0)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="." onclick="dian()" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="=" onclick="jisuan()" /></td>
           </tr>
       </table>
   </body>
</html>

猜你喜欢