JS的简单计算器

最新推荐文章于 2019-08-18 14:22:22 发布

LiuWaiterC

最新推荐文章于 2019-08-18 14:22:22 发布

阅读量474

点赞数 1

本文链接：https://blog.csdn.net/liuwaiter/article/details/46867093

版权

<!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" οnclick="clearAC()"/></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="/" οnclick="czFuhao('/')" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="*" οnclick="czFuhao('*')" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="←" οnclick="shanchu()" /></td>
           </tr>
           <tr>
               <td><input type="button" style="width: 50px;height: 40px;" value="7" οnclick="dianjishuzi(7)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="8" οnclick="dianjishuzi(8)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="9" οnclick="dianjishuzi(9)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="-" οnclick="czFuhao('-')" /></td>
           </tr>
           <tr>
                <td><input type="button" style="width: 50px;height: 40px;" value="4" οnclick="dianjishuzi(4)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="5" οnclick="dianjishuzi(5)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="6" οnclick="dianjishuzi(6)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="+" οnclick="czFuhao('+')" /></td>
           </tr>
           <tr>
                <td><input type="button" style="width: 50px;height: 40px;" value="1" οnclick="dianjishuzi(1)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="2" οnclick="dianjishuzi(2)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="3" οnclick="dianjishuzi(3)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="%" οnclick="czFuhao('%')" /></td>
           </tr>
           <tr>
                <td colspan="2" align="center"><input type="button" style="width: 118px;height: 40px;" value="0" οnclick="dianjishuzi(0)" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="." οnclick="dian()" /></td>
               <td><input type="button" style="width: 50px;height: 40px;" value="=" οnclick="jisuan()" /></td>
           </tr>
       </table>
   </body>
</html>

LiuWaiterC

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS的简单计算器

计算器 var fuhao =""; //定义一个运算符号 var zuobian =""; //定义第一个变量 var youbian =""; //定义第二个变量 var result =0; //给输出结果一个定义 fu
复制链接

扫一扫