超级简易的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 相关文章推荐
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 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
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
python轻松实现代码编码格式转换
2015/03/26 Python
Python实现购物车程序
2018/04/16 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
django query模块
2019/04/20 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
python判断正负数方式
2020/06/03 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
普通员工辞职信范文
2015/05/12 职场文书
民事调解协议书
2016/03/21 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电