登录  /  注册
博主信息
博文 2
粉丝 0
评论 0
访问量 2862
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
js 计算器实现
两个人的幸福的博客
原创
1420人浏览过

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学