JS实现的加减乘除四则运算计算器示例


Posted in Javascript onAugust 09, 2017

本文实例讲述了JS实现超级简易的加减乘除四则运算计算器。分享给大家供大家参考,具体如下:

先来看看运行效果:

JS实现的加减乘除四则运算计算器示例

具体代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>简单的计算器(3water.com)</title>
    <style>
      body{
        margin: 0;
      }
      .tab{
        border: 3px solid black ;
        border-radius: 2px;
        border-collapse:collapse;
        width: 268px;
        height: 402px;
        margin: 20px 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中。

PS:这里再为大家推荐几款计算工具供大家进一步参考借鉴:

在线一元函数(方程)求解计算工具:
http://tools.3water.com/jisuanqi/equ_jisuanqi

科学计算器在线使用_高级计算器在线计算:
http://tools.3water.com/jisuanqi/jsqkexue

在线计算器_标准计算器:
http://tools.3water.com/jisuanqi/jsq

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
List Installed Software Features
Jun 11 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
vant中的toast轻提示实现代码
Nov 04 Javascript
微信小程序实现购物车小功能
Dec 30 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 #Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 #Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 #Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 #Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 #Javascript
vuejs父子组件之间数据交互详解
Aug 09 #Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 #Javascript
You might like
PHP中的日期处理方法集锦
2007/01/02 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Python3多线程操作简单示例
2018/05/22 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
校园达人秀策划书
2014/01/12 职场文书
银行实习生的自我评价
2014/01/13 职场文书
2014年情人节活动方案
2014/02/16 职场文书
现金出纳岗位职责
2014/03/15 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
校庆标语集锦
2014/06/25 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
python简单验证码识别的实现过程
2021/06/20 Python