一个前端的计算器

最新推荐文章于 2024-05-31 20:51:25 发布
吴大大酱
最新推荐文章于 2024-05-31 20:51:25 发布
阅读量1.1k
点赞数
本文链接：https://blog.csdn.net/sinat_29724155/article/details/70049040
版权
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="Generator" content="">
    <meta name="Keywords" content="">
    <meta name="author" content="">
    <title>计算器</title>
    <style>
      body{font-size:12px;font-family:Aral,Georgia,"Times New Roman",Times,serif:color:#555;text-align:center;background:#e2e2e2;}
      h6{margin:0;font-size:12px;}
      #calculator{width:94%;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:14.43%;margin:0.5%;display:inline;line-height:32px;font-size:32px;background:#eaeaea;padding:2.28%;}
      #calculator li.tool{background:#738FD8;}
      #calculator li.D06A15{background-color:#D06A15;}
      #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;}
      .screen {width:97%;height:42px;line-height:42px;padding:4px;border:#e6e6e6 1px solid;border-bottom:#f2f2f2 1px solid;border-right:#f2f2f2 1px solid;margin:10px auto;text-align:right;padding-left:20px;font-size:3em;color:#999;direction:ltr;}



    </style>
  </head>
  <body>

    <div id="calculator">
      <div id="calcu-header"><span class="imyeah">@<a href="http://www.baidu.com" target="_blank">www.baidu.com</a></span><h>计算器：吴生涛</h></div>
      <div id="calcu-screen">
        <input type="text"name="numScreen" id="result" class="screen" value="0" onfocus="this.flur();"disabled="disabled"/>
      </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="clearzero()">C</li> 
          <li onclick="command(4)">4</li>
          <li onclick="command(5)">5</li>
          <li onclick="command(6)">6</li>
          <li class="tool" onclick="op('*')">×</li> 
          <li class="tool" onclick="op('/')">÷</li> 
          <li onclick="command(1)">1</li>
          <li onclick="command(2)">2</li>
          <li onclick="command(3)">3</li>
          <li class="tool" onclick="op('+')">+</li> 
          <li class="tool" onclick="op('-')">-</li>
          <li onclick="command(0)">0</li> 
          <li onclick="dzero()">00</li> 
          <li onclick="dot()">.</li> 
          <li class="tool" onclick="op('%')">%</li> 
          <li class="tool D06A15" onclick="equal()">=</li> 

        </ul>
        <div id="audioBox"></div>
      </div>

    </div>
    <script type="text/javascript">
      var resultDom=document.getElementById("result");
      var dotFlag=true;
      var opFlag=true;
      function command(num){
          var str=resultDom.value;
          str=(str=="0"?"":str);
          resultDom.value=str+num;
          play(num);
      };
      function op(op){
          if(opFlag){
              resultDom.value+=op;
              dotFlag=true;
              play("j");
              opFlag=false;
          }
      };
      function play(m){
           document.getElementById("audioBox").innerHTML="<embed src='"+m+".wav' width='0' height='0'/>";
      }
      function dot(){
          if(dotFlag){
                //拿到文本框的值
                var num=resultDom.value;
                resultDom.value=num+".";
                dotFlag=false;
          }
      }
      //运算
      function equal(){
          var num=resultDom.value;
          resultDom.value=eval(num);
          var r=resultDom.value;
          dotFlag=(r.indexof(".")==-1?true:false);
          play("r");
          opFlag=true;


      }
      function dzero(){
        var num = resultDom.value;//获取文本框的值
        if(num=="0"){
            return;//如果等返回000
        }
        var str = resultDom.value;
        resultDom.value = str + "00";
        play("j");
    };
    function clearzero(){
         resultDom.value="0";
         opFlag=true;
         dotFlag=true;
         play("r");

    }
    function del(){
         var val=resultDom.value;
         if(!val){return;}
         var str=val.substring(0,val.length-1);
         if(str && /[\.|\+|\-|\*|\/|\%]$/.test(str)){
            resultDom.value = str.replace(/[\.|\+|\-|\*|\/|\%]$/,"")||0;
            dotFlag = true;//小数点锁打开
        }else{
            resultDom.value = str||0;
        }
        play("r");
    };






    </script>
  <body>
</html>