javaScript简单实例：实现一个简易计算器

详细代码如下：

**样式代码**
 <style type="text/css"> 
     body{ 
        font-size:12px; 
        font-family:Arial, Georgia, "Times New Roman", Times, serif; 
        color:#555; 
        text-align:center; 
        background-color:#e2e2e2; 
    } 
    h6{ 
        margin:0; 
        font-size:12px; 
    } 
    #calculator{ 
        width:240px; 
        height:auto; 
        overflow:hidden; 
        margin:10px auto; 
        border:#fff 1px solid; 
        padding-bottom:10px; 
        background-color:#f2f2f2; 
    } 
    #calculator div { 
        clear:both; 
    } 
    #calculator ul{ 
        padding:0; 
        margin:5px 14px; 
        border:#fff 1px solid; 
        height:auto; 
        overflow:hidden 
    } 
    #calculator li{ 
        list-style:none; 
        float:left; 
        width:32px; 
        height:32px; 
        margin:5px; 
        display:inline; 
        line-height:32px; 
        font-size:14px; 
        text-align:center;
        background-color:#eaeaea; 
    } 
    #calculator li.tool{ 
        background-color:#e2e2e2; 
    } 
    #calculator li:hover{ 
        background-color:#f9f9f9; 
        cursor:pointer; 
    } 
    #calculator li:active{ 
        background-color:#fc0; 
        cursor:pointer; 
    } 
    #calculator li.tool:active{ 
        background-color:#d8e8ff; 
        cursor:pointer; 
    } 
    #calcu-head { 
        text-align:left; 
        padding:10px 15px 5px; 
    } 
    span.imyeah { 
        float:right; 
        color:#ccc; 
    } 
    span.imyeah a{ 
        color:#ccc; 
    } 
     #calcu-screen {
        padding-left:15px;
    }
    .screen{ 
        width:210px; 
        height:32px; 
        line-height:24px; 
        padding:4px; 
        left:10px;
        border:#e6e6e6 1px solid; 
        border-bottom:#f2f2f2 1px solid; 
        border-right:#f2f2f2 1px solid; 
        margin:10px auto; 
        direction:ltr; 
        text-align:right; 
        font-size:16px; 
        color:#999; 
    } 
    #calcu-foot{ 
        text-align:left; 
        padding:10px 15px 5px; 
        height:auto; 
        overflow:hidden; 
    } 
    span#note{ 
        float:left; 
        width:210px; 
        height:auto; 
        overflow:hidden; 
        color:red; 
    } 
    span.welcome{ 
        clear:both; 
        color:#999; 
    } 
    span.welcome a{ 
        float:right; 
        color:#999; 
    } 
   </style>

   **js代码**
   <script type="text/javascript">
      var num=0,result=0,numshow="0"; 
      var operate=0; //判断输入状态的标志 
      var calcul=0; //判断计算状态的标志 
      var quit=0; //防止重复按键的标志 
      function command(num){ 
         var str=String(document.calculator.numScreen.value); //获得当前显示数据 
         str=(str!="0") ? ((operate==0) ? str : "") : ""; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值; 
         str=str + String(num); //给当前值追加字符 
         document.calculator.numScreen.value=str; //刷新显示 
         operate=0; //重置输入状态 
         quit=0; //重置防止重复按键的标志 
      } 
      function dzero(){ 
         var str=String(document.calculator.numScreen.value); 
         str=(str!="0") ? ((operate==0) ? str + "00" : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当str+"00"，否则返回"0"; 
         document.calculator.numScreen.value=str; 
         operate=0; 
      } 
      function dot(){ 
         var str=String(document.calculator.numScreen.value); 
         str=(str!="0") ? ((operate==0) ? str : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0"; 
        for(i=0; i<=str.length;i++){ //判断是否已经有一个点号 
           if(str.substr(i,1)==".") 
           return false; //如果有则不再插入 
        } 
        str=str + "."; 
        document.calculator.numScreen.value=str; 
        operate=0; 
     } 
     function del(){ //退格 
        var str=String(document.calculator.numScreen.value); 
        str=(str!="0") ? str : ""; 
        str=str.substr(0,str.length-1); 
        str=(str!="") ? str : "0"; 
        document.calculator.numScreen.value=str; 
     } 
     function clearscreen(){ //清除数据 
        num=0; 
        result=0; 
        numshow="0"; 
        document.calculator.numScreen.value="0"; 
     } 
     function plus(){ //加法 
        calculate(); //调用计算函数 
        operate=1; //更改输入状态 
        calcul=1; //更改计算状态为加 
     } 
     function minus(){ //减法 
        calculate(); 
        operate=1; 
        calcul=2; 
     } 
     function times(){ //乘法 
        calculate(); 
        operate=1; 
        calcul=3; 
     } 
     function divide(){ //除法 
        calculate(); 
        operate=1; 
        calcul=4; 
     }
     function persent(){ //求余 
        calculate(); 
        operate=1; 
        calcul=5; 
     } 
     function equal(){ 
        calculate(); //等于 
        operate=1; 
        num=0; 
        result=0; 
        numshow="0"; 
     } 
// 
     function calculate(){ 
        numshow=Number(document.calculator.numScreen.value); 
        if(num!=0 && quit!=1){ //判断前一个运算数是否为零以及防重复按键的状态 
          switch(calcul){ //判断要输入状态 
            case 1:result=num+numshow;break; //计算"+" 
            case 2:result=num-numshow;break; //计算"-" 
            case 3:result=num*numshow;break; 
            case 4:if(numshow!=0){
                      result=num/numshow;
                   }else{
                      document.getElementById("note").innerHTML="被除数不能为零！"; 
                      setTimeout(clearnote,4000);
                   } 
                   break; 
            case 5:result=num%numshow;break; 
          } 
          quit=1; //避免重复按键 
      }else{ 
         result=numshow; 
      } 
      numshow=String(result); 
      document.calculator.numScreen.value=numshow; 
      num=result; //存储当前值 
    } 
    function clearnote(){ //清空提示 
      document.getElementById("note").innerHTML=""; 
    } 
   </script>
   **html代码**
<body>
<div id="calculator"> 
  <div id="calcu-head">
  <span class="imyeah">© 
  <a href="" target="_blank">I'm Mr.Sun!</a>
  </span>
  <h6>简单的计算器</h6>
  </div> 
  <form name="calculator" action="" method="get"> 
  <div id="calcu-screen"> 
  <!--配置显示窗口，使用onfocus="this.blur();"避免键盘输入--> 
  <input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();" /> 
  </div> 
  <div id="calcu-btn"> 
    <ul> <!--配置按钮--> 
      <li onclick="command(7)">7</li> 
      <li onclick="command(8)">8</li> 
      <li onclick="command(9)">9</li> 
      <li class="tool" onclick="del()">←</li> 
      <li class="tool" onclick="clearscreen()">C</li> 
      <li onclick="command(4)">4</li> 
      <li onclick="command(5)">5</li> 
      <li onclick="command(6)">6</li> 
      <li class="tool" onclick="times()">×</li> 
      <li class="tool" onclick="divide()">÷</li> 
      <li onclick="command(1)">1</li> 
      <li onclick="command(2)">2</li> 
      <li onclick="command(3)">3</li> 
      <li class="tool" onclick="plus()">+</li> 
      <li class="tool" onclick="minus()">-</li> 
      <li onclick="command(0)">0</li> 
      <li onclick="dzero()">00</li> 
      <li onclick="dot()">.</li> 
      <li class="tool" onclick="persent()">%</li> 
      <li class="tool" onclick="equal()">=</li> 
    </ul> 
  </div> 
  <div id="calcu-foot"> 
  <span id="note"></span> 
  <span class="welcome">欢迎使用javascript计算器！
  <a href="" target="_blank">反馈</a>
  </span> 
  </div> 
</form> 
</div> 
</body>

计算器图形展示