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 相关文章推荐
javascript据option的value值快速设定初始的selected选项
Aug 13 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
浅谈js中的bind
Mar 18 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
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采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
详解Python编程中time模块的使用
2015/11/20 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
在python中求分布函数相关的包实例
2020/04/15 Python
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
酒店办公室文员岗位职责
2013/12/18 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
高中生逃课检讨书
2014/10/10 职场文书
老乡会致辞
2015/07/28 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python