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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
给Javascript数组插入一条记录的代码
Aug 30 Javascript
JavaScript 密码强度判断代码
Sep 05 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
浅谈javascript的闭包
Jan 23 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
原生js实现each方法实例代码详解
May 27 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 class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
javascript 写类方式之二
2009/07/05 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
Python生成随机数的方法
2014/01/14 Python
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Python fileinput模块使用介绍
2014/11/30 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
django框架自定义用户表操作示例
2018/08/07 Python
详解python itertools功能
2020/02/07 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
学习Python需要哪些工具
2020/09/04 Python
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
环保倡议书500字
2014/05/15 职场文书
电话客服工作职责
2014/07/27 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python