超级简易的JS计算器实例讲解(实现加减乘除)


Posted in Javascript onAugust 08, 2017

废话不多说,直接上代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>简单的计算器</title>
    <style> 
      body{
        margin: 0;
      }
      .tab{
        border: 3px solid black ;
        border-radius: 2px;
        border-collapse:collapse;
        width: 268px;
        height: 402px;
        margin: 100px auto;
      }
      
      .tr{
        height: 67px;
        width: 268px;
        border: 3px solid black ;
        text-align: right;
      }
      .tr1{
        width: 268px;
        height: 67px;
        border: 3px solid black ;
        text-align: center;
      }
      .tr2{
        width: 67px;
        height: 67px;
        border: 3px solid black ;
        text-align: center;
      }
        
      
    </style>
    <script>
      
      var s1 = "";
      var s2 = "";
      var s3 = "";
      var s4 = "";
      var s5 = "";
      function view(val){
        var a = document.getElementById(val);
        s1 = a.innerHTML;
        if(s1=="+" || s1=="-" || s1=="*" || s1=="/"){
          s3 = s1;
          s1 = "";
        }
        
        if(s3=="+" || s3=="-" || s3=="*" || s3=="/"){
          add2(s1);
          
        }
        
        if(s3==""){
          add1(s1);  
          
        }
        
        
        
        
      }
      function add1(s1){
        s2 = s2 + s1;
        show();
      }
      function add2(s1){
        s4 = s4 + s1;
        show();
      }
      
      function cal(){
        switch(s3){
          case "+":{
            s5 = (String)((parseFloat(s2)+parseFloat(s4)).toFixed(2));
            result.innerHTML = s5;
            break;
          }
          case "-":{
            s5 = (String)((parseFloat(s2)-parseFloat(s4)).toFixed(2));
            result.innerHTML = s5;
            break;
          }
          case "*":{
            s5 = (String)((parseFloat(s2)*parseFloat(s4)).toFixed(2));
            result.innerHTML = s5;
            break;
          }
          case "/":{
            s5 = (String)((parseFloat(s2)/parseFloat(s4)).toFixed(2));
            result.innerHTML = s5;
            break;
          }
        }
        
      }
      
      function show(){
        var result = document.getElementById("result");
        
        result.innerHTML = s2+s3+s4;
        
      }
      
      
      
    </script>
  </head>
  <body>
    <table class="tab">
      <tr class = "tr2">
        <td colspan="4">简易计算器</td>
      </tr>
      <tr class="tr">
        <td id="result" colspan="4" >  
        
        </td>
      </tr>
      <tr >
        <td id="+" class="tr1" onclick="view('+')">+</td>
        <td id="-" class="tr1" onclick="view('-')">-</td>
        <td id="*" class="tr1" onclick="view('*')">*</td>
        <td id="/" class="tr1" onclick="view('/')">/</td>
      </tr>
      <tr >
        <td id="7" class="tr1" onclick="view('7')">7</td>
        <td id="8" class="tr1" onclick="view('8')">8</td>
        <td id="9" class="tr1" onclick="view('9')">9</td>
        <td id="0" class="tr1" onclick="view('0')">0</td>
      </tr>
      <tr>
        <td id="4" class="tr1" onclick="view('4')">4</td>
        <td id="5" class="tr1" onclick="view('5')">5</td>
        <td id="6" class="tr1" onclick="view('6')">6</td>
        <td id="." class="tr1" onclick="view('.')">.</td>
      </tr>
      <tr>
        <td id="1" class="tr1" onclick="view('1')">1</td>
        <td id="2" class="tr1" onclick="view('2')">2</td>
        <td id="3" class="tr1" onclick="view('3')">3</td>
        <td id="=" class="tr1" onclick="cal()" >=</td>
      </tr>
    </table>
  </body>
</html>

对于这个程序来说,判断的顺序非常重要,不然就会把"+"号存在s2,s4中而不是s3中。

以上这篇超级简易的JS计算器实例讲解(实现加减乘除)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中this关键字使用方法详解
Mar 08 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 #Javascript
Angularjs上传文件组件flowjs功能
Aug 07 #Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 #Javascript
详解express与koa中间件模式对比
Aug 07 #Javascript
JS实现简单短信验证码界面
Aug 07 #Javascript
ReactNative Image组件使用详解
Aug 07 #Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 #Javascript
You might like
php中cookie的作用域
2008/03/27 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
node通过npm写一个cli命令行工具
2017/10/12 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
python中sys.argv参数用法实例分析
2015/05/20 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
django 单表操作实例详解
2019/07/30 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
会计自荐信范文
2014/03/09 职场文书
研讨会主持词
2014/04/02 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
小学生安全保证书
2015/05/09 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android
Python正则表达式中flags参数的实例详解
2022/04/01 Python
Redis keys命令的具体使用
2022/06/05 Redis
字节飞书面试promise.all实现示例
2022/06/16 Javascript