<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>计算器</title>
    <!-- 有事，有项目联系我，QQ，821642832 -->
  </head>
  <body>
    <style type="text/css">
      body{
        width: 600px;
        margin: 80px auto 0 auto;
      }
      #xian{
        width: 580px;
        border: 1px solid #f2f2f2;
        height: 70px;
        background: #f2f2f2;
        border-radius: 5px;
        text-align: right;
        font: 35px/2 "bodoni mt black";
        padding: 0 8px;
      }
      .jian{
        width: 145px;
        background: #f2f2f2;
        display: inline-block;
        height: 45px;
        margin: 5px 0;
        font: 600 20px/45px "courier new";
        text-align: center;
        cursor: pointer;
      }
      .jian:hover{
        background: #e2e2e2;
      }
      .jian:active{
        background: #d2d2d2;
      }
    </style>
    <div id="xian"></div>
    <div class="jian yun">+</div>
    <div class="jian yun">-</div>
    <div class="jian yun">*</div>
    <div class="jian yun">/</div>
    <div id="shuzi" style="width: 450px;float: left;">
      <div class="jian">1</div>
      <div class="jian">2</div>
      <div class="jian">3</div>
      <div class="jian">4</div>
      <div class="jian">5</div>
      <div class="jian">6</div>
      <div class="jian">7</div>
      <div class="jian">8</div>
      <div class="jian">9</div>
      <div class="jian">0</div>
      <div class="jian">00</div>
      <div class="jian">.</div>
    </div>
    <div style="width: 150px;float: left">
      <div id="tui" class="jian">></div>
      <div id="qing" class="jian">ce</div>
      <div id="deng" class="jian" style="height: 100px;line-height: 100px;">=</div>
    </div>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
      var lishi='';
      var zong='';
      var yun='';
      var clear=false;
      $('#shuzi div').click(function(){
        if(clear){
          $('#xian').text('');
          clear=false;
        }
        window.zong=$('#xian').text();
        var dian=$(this).text();
        if(dian=='.' && window.zong.indexOf('.') != -1){
          return false;
        }
        window.zong = String(window.zong) + dian;
        $('#xian').text(window.zong);
      });
      $('.yun').click(function(){
        if(lishi=='' && yun == ''){
          window.linshi=$('#xian').text();
          yun=$(this).text();
        }else{
          switch(yun){
            case '+':
              window.linshi=Number(linshi) + Number($('#xian').text());
              yun=$(this).text();
              $('#xian').text(Number(window.linshi));
              break;
            case '-':
              window.linshi=Number(linshi)-Number($('#xian').text());
              yun=$(this).text();
               $('#xian').text(Number(window.linshi));
              break;
            case '*':
              window.linshi=Number(linshi)*Number($('#xian').text());
              yun=$(this).text();
               $('#xian').text(Number(window.linshi));
              break;
            case '/':
              window.linshi=Number(linshi)/Number($('#xian').text());
              yun=$(this).text();
               $('#xian').text(Number(window.linshi));
              break;
          }
        }
        clear=true;
      });
      $('#deng').click(function(){
        switch(yun){
          case '+':
            window.linshi=Number(linshi) + Number($('#xian').text());
            yun=$(this).text();
            $('#xian').text(Number(window.linshi));
            break;
          case '-':
            window.linshi=Number(linshi)-Number($('#xian').text());
            yun=$(this).text();
             $('#xian').text(Number(window.linshi));
            break;
          case '*':
            window.linshi=Number(linshi)*Number($('#xian').text());
            yun=$(this).text();
             $('#xian').text(Number(window.linshi));
            break;
          case '/':
            window.linshi=Number(linshi)/Number($('#xian').text());
            yun=$(this).text();
             $('#xian').text(Number(window.linshi));
            break;
        }
      });
      $('#qing').click(function(){
        window.linshi='';
        yun='';
        $('#xian').text('');
      });
      $('#tui').click(function(){
        var s=String(window.zong);
        s=s.substring(0,s.length-1);
        $('#xian').text(s);
        window.zong=s;
      });


    </script> 
  </body>
</html>