写给新手：javascript写的简单的计算器，内容很多，方法实用，推荐！

最近用javascript写了一个简单的计算器，自己测试感觉还好，先给大家观赏下界面：

界面就是这样了，但是功能如何呢？

现在只是个简单的标准计算器，能进行加减乘除连续运算，以及求余运算。如果发生被除数为零的错误，下面会给出提示，就像这样：

自己不知道写的怎么样，但是对于新手来说，这肯定是一份大餐，里面可以接触到的东西不少，可以拿来学习。如果有高手看出里面的疏漏、错误等望不吝赐教，给予指点。

下面贴上代码，希望里面的注释足够多了。

js部分：

View Code

  1 var num=0,result=0,numshow="0";
  2 var operate=0;           //判断输入状态的标志
  3 var calcul=0;            //判断计算状态的标志
  4 var quit=0;              //防止重复按键的标志
  5 
  6 function command(num){
  7     var str=String(document.calculator.numScreen.value);    //获得当前显示数据
  8     str=(str!="0") ? ((operate==0) ? str : "") : "";        //如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值;
  9     str=str + String(num);                   //给当前值追加字符
 10     document.calculator.numScreen.value=str; //刷新显示
 11     operate=0;   //重置输入状态
 12     quit=0;      //重置防止重复按键的标志
 13     }
 14 
 15 function dzero(){
 16     var str=String(document.calculator.numScreen.value);
 17     str=(str!="0") ? ((operate==0) ? str + "00" : "0") : "0";   //如果当前值不是"0"，且状态为0，则返回当str+"00"，否则返回"0";
 18     document.calculator.numScreen.value=str;
 19     operate=0;
 20     }
 21 
 22 function dot(){
 23     var str=String(document.calculator.numScreen.value);
 24     str=(str!="0") ? ((operate==0) ? str : "0") : "0";        //如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0";
 25     for(i=0; i<=str.length;i++){             //判断是否已经有一个点号
 26         if(str.substr(i,1)==".") return false;   //如果有则不再插入
 27     }
 28     str=str + ".";
 29     document.calculator.numScreen.value=str;
 30     operate=0;
 31     }
 32 
 33 function del(){   //退格
 34     var str=String(document.calculator.numScreen.value);
 35     str=(str!="0") ? str : "";
 36     str=str.substr(0,str.length-1);
 37     str=(str!="") ? str : "0";
 38     document.calculator.numScreen.value=str;
 39     }
 40 
 41 function clearscreen(){     //清除数据
 42     num=0;
 43     result=0;
 44     numshow="0";
 45     document.calculator.numScreen.value="0";
 46     }
 47 
 48 function plus(){  //加法
 49     calculate(); //调用计算函数
 50     operate=1;   //更改输入状态
 51     calcul=1;    //更改计算状态为加
 52     }
 53 
 54 function minus(){  //减法
 55     calculate();
 56     operate=1;
 57     calcul=2;
 58     }
 59 
 60 function times(){  //乘法
 61     calculate();
 62     operate=1;
 63     calcul=3;
 64     }
 65 
 66 function divide(){  //除法
 67     calculate();
 68     operate=1;
 69     calcul=4;
 70     }
 71 
 72 function persent(){  //求余
 73     calculate();
 74     operate=1;
 75     calcul=5;
 76     }
 77 
 78 function equal(){
 79     calculate();    //等于
 80     operate=1;
 81     num=0;
 82     result=0;
 83     numshow="0";
 84     }
 85     //
 86 function calculate(){
 87     numshow=Number(document.calculator.numScreen.value);
 88     if(num!=0 && quit!=1){                            //判断前一个运算数是否为零以及防重复按键的状态
 89         switch(calcul){                                   //判断要输入状态
 90             case 1:result=num+numshow;break;               //计算"+" 
 91             case 2:result=num-numshow;break;               //计算"-"
 92             case 3:result=num*numshow;break;               
 93             case 4:if(numshow!=0){result=num/numshow;}else{document.getElementById("note").innerHTML="被除数不能为零！"; setTimeout(clearnote,4000)} break;
 94             case 5:result=num%numshow;break;
 95             }
 96         quit=1;    //避免重复按键
 97         }
 98     else{
 99         result=numshow;
100         }
101     numshow=String(result);
102     document.calculator.numScreen.value=numshow;
103     num=result;   //存储当前值
104     }
105 function clearnote(){    //清空提示
106     document.getElementById("note").innerHTML="";
107     }

html部分：

View Code

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>写给新手：js表单操作（四） 简单计算器（二）</title>
  6 <style type="text/css">
  7 body {
  8     font-size:12px;
  9     font-family:Arial, Georgia, "Times New Roman", Times, serif;
 10     color:#555;
 11     text-align:center;
 12     background-color:#e2e2e2;
 13 }
 14 h6{
 15     margin:0;
 16     font-size:12px;
 17 }
 18 
 19 #calculator {
 20     width:240px;
 21     height:auto;
 22     overflow:hidden;
 23     margin:10px auto;
 24     border:#fff 1px solid;
 25     padding-bottom:10px;
 26     background-color:#f2f2f2;
 27 }
 28 #calculator div {
 29     clear:both;
 30 }
 31 #calculator ul{
 32     padding:0;
 33     margin:5px 14px;
 34     border:#fff 1px solid;
 35     height:auto;
 36     overflow:hidden
 37 }
 38 #calculator li{
 39     list-style:none;
 40     float:left;
 41     width:32px;
 42     height:32px;
 43     margin:5px;
 44     display:inline;
 45     line-height:32px;
 46     font-size:14px;
 47     background-color:#eaeaea;
 48 }
 49 #calculator li.tool{
 50     background-color:#e2e2e2;
 51 }
 52 #calculator li:hover{
 53     background-color:#f9f9f9;
 54     cursor:pointer;
 55 }
 56 #calculator li:active{
 57     background-color:#fc0;
 58     cursor:pointer;
 59 }
 60 #calculator li.tool:active{
 61     background-color:#d8e8ff;
 62     cursor:pointer;
 63 }
 64 #calcu-head {
 65     text-align:left;
 66     padding:10px 15px 5px;
 67 }
 68 span.imyeah {
 69     float:right;
 70     color:#ccc;
 71 }
 72 
 73 span.imyeah a{
 74     color:#ccc;
 75 }
 76 .screen{
 77     width:200px;
 78     height:24px;
 79     line-height:24px;
 80     padding:4px;
 81     border:#e6e6e6 1px solid;
 82     border-bottom:#f2f2f2 1px solid;
 83     border-right:#f2f2f2 1px solid;
 84     margin:10px auto;
 85     direction:ltr;
 86     text-align:right;
 87     font-size:16px;
 88     color:#999;
 89 }
 90 #calcu-foot{
 91     text-align:left;
 92     padding:10px 15px 5px;
 93     height:auto;
 94     overflow:hidden;
 95 }
 96 span#note{
 97     float:left;
 98     width:210px;
 99     height:auto;
100     overflow:hidden;
101     color:red;
102 }
103 span.welcome{
104     clear:both;
105     color:#999;
106 }
107 span.welcome a{
108     float:right;
109     color:#999;
110 }
111 </style>
112 <script language="javascript">
113 //此处插入上面的js代码
114 </script>
115 </head>
116 <body>
117 <div id="calculator">
118     <div id="calcu-head"><span class="imyeah">&copy;&nbsp;<a href="http://www.cnblogs.com/imyeah/" target="_blank">I'm Yeah!</a></span><h6>简单的计算器</h6></div>
119     <form name="calculator" action="" method="get">
120     <div id="calcu-screen">
121     <!--配置显示窗口，使用onfocus="this.blur();"避免键盘输入-->
122     <input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();" /> 
123     </div>   
124     <div id="calcu-btn">
125         <ul>    <!--配置按钮-->
126             <li onclick="command(7)">7</li>
127             <li onclick="command(8)">8</li>
128             <li onclick="command(9)">9</li>
129             <li class="tool" onclick="del()">&larr;</li>
130             <li class="tool" onclick="clearscreen()">C</li>
131             <li onclick="command(4)">4</li>
132             <li onclick="command(5)">5</li>
133             <li onclick="command(6)">6</li>
134             <li class="tool" onclick="times()">&times;</li>
135             <li class="tool" onclick="divide()">&divide;</li>
136             <li onclick="command(1)">1</li>
137             <li onclick="command(2)">2</li>
138             <li onclick="command(3)">3</li>
139             <li class="tool" onclick="plus()">+</li>
140             <li class="tool" onclick="minus()">-</li>
141             <li onclick="command(0)">0</li>
142             <li onclick="dzero()">00</li>
143             <li onclick="dot()">.</li>
144             <li class="tool" onclick="persent()">%</li>
145             <li class="tool" onclick="equal()">=</li>
146         </ul>
147     </div>
148     <div id="calcu-foot">
149         <span id="note"></span>
150         <span class="welcome">欢迎使用javascript计算器！<a href="http://www.cnblogs.com/imyeah/archive/2011/12/28/2304197.html" target="_blank">反馈</a></span>
151     </div>
152     </form>
153 </div>
154 </body>
155 </html>