首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

地瓜好吃

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
react路由配置方式详解
Aug 07 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 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
Sunmao(1) sout(1) 滚动条(1) 输入法(2) 蓝屏(1) Sentry(1) 403(1) 声卡驱动(1) svg(1) win7(2)
You might like
深入php中var_dump方法的使用详解
2013/06/24 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
微信小程序模板（template）使用详解
2018/01/31 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
python 正则式使用心得
2009/05/07 Python
python实现基本进制转换的方法
2015/07/11 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
对Python w和w+权限的区别详解
2019/01/23 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法（二）
2020/10/12 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
几道数据库的面试题或笔试题
2014/05/31 面试题
毕业生就业推荐信范文
2013/12/01 职场文书
学前教育学生自荐信范文
2013/12/31 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
公司内部升职自荐信
2015/03/27 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
《烈火英雄》观后感：致敬和平时代的英雄
2019/11/11 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS