JS实现的简单四则运算计算器功能示例


Posted in Javascript onSeptember 27, 2017

本文实例讲述了JS实现的简单四则运算计算器功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

JS实现的简单四则运算计算器功能示例

具体代码如下:

<!DOCTYPE html>
<html>
<meta name="content-type" content="text/html; charset=UTF-8">
<head>
  <title>3water.com 计算器 Calculator</title>
  <!--将按键内容以字符串形式存储在文字框中当按钮为“=”时,调用eval方法计算结果然后将结果输出文字框中-->
  <script type="text/javascript">
    var numresult;
    var str;
    function onclicknum(nums) {
      str = document.getElementById("nummessege");
      str.value = str.value + nums;
    }
    function onclickclear() {
      str = document.getElementById("nummessege");
      str.value = "";
    }
    function onclickresult() {
      str = document.getElementById("nummessege");
      numresult = eval(str.value);
      str.value = numresult;
    }
  </script>
</head>
<body bgcolor="affff" >
<!--定义按键表格,每个按键对应一个事件触发-->
<table border="1" align="center" bgColor="#bbff77"
    style="height: 350px; width: 270px">
  <tr>
    <td colspan="4">
      <input type="text" id="nummessege"
          style="height: 90px; width: 350px; font-size: 50px" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="1" id="1" onclick="onclicknum(1)"
          style="height: 70px; width: 90px; font-size: 35px">
    </td>
    <td>
      <input type="button" value="2" id="2" onclick="onclicknum(2)"
          style="height: 70px; width: 90px; font-size: 35px">
    </td>
    <td>
      <input type="button" value="3" id="3" onclick="onclicknum(3)"
          style="height: 70px; width: 90px; font-size: 35px">
    </td>
    <td>
      <input type="button" value="+" id="add" onclick="onclicknum('+')"
          style="height: 70px; width: 90px; font-size: 35px">
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="4" id="4" onclick="onclicknum(4)"
          style="height: 70px; width: 90px; font-size: 35px">
    </td>
    <td>
      <input type="button" value="5" id="5" onclick="onclicknum(5)"
          style="height: 70px; width: 90px; font-size: 35px">
    </td>
    <td>
      <input type="button" value="6" id="6" onclick="onclicknum(6)"
          style="height: 70px; width: 90px; font-size: 35px">
    </td>
    <td>
      <input type="button" value="-" id="sub" onclick="onclicknum('-')"
          style="height: 70px; width: 90px; font-size: 35px">
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="7" id="7" onclick="onclicknum(7)"
          style="height: 70px; width: 90px; font-size: 35px">
    </td>
    <td>
      <input type="button" value="8" id="8" onclick="onclicknum(8)"
          style="height: 70px; width: 90px; font-size: 35px">
    </td>
    <td>
      <input type="button" value="9" id="9" onclick="onclicknum(9)"
          style="height: 70px; width: 90px; font-size: 35px">
    </td>
    <td>
      <input type="button" value="*" id="mul" onclick="onclicknum('*')"
          style="height: 70px; width: 90px; font-size: 35px">
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <input type="button" value="0" id="0" onclick="onclicknum(0)"
          style="height: 70px; width: 190px; font-size: 35px">
    </td>
    <td>
      <input type="button" value="." id="point" onclick="onclicknum('.')"
          style="height: 70px; width: 90px; font-size: 35px">
    </td>
    <td>
      <input type="button" value="/" id="division"
          onclick="onclicknum('/')"
          style="height: 70px; width: 90px; font-size: 35px">
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <input type="button" value="Del" id="clear"
          onclick="onclickclear()"
          style="height: 70px; width: 190px; font-size: 35px" />
    </td>
    <td colspan="2">
      <input type="button" value="=" id="result"
          onclick="onclickresult()"
          style="height: 70px; width: 190px; font-size: 35px" />
    </td>
  </tr>
</table>
</body>
</html>

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

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

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

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

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

Javascript 相关文章推荐
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
Vue header组件开发详解
Jan 26 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 #Javascript
js实现扫雷小程序的示例代码
Sep 27 #Javascript
Three.js如何实现雾化效果示例代码
Sep 27 #Javascript
浅谈Angular4中常用管道
Sep 27 #Javascript
深入理解Vue.js源码之事件机制
Sep 27 #Javascript
js截取字符串功能的实现方法
Sep 27 #Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 #Javascript
You might like
php生成随机颜色方法汇总
2014/12/03 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
python正则表达式match和search用法实例
2015/03/26 Python
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
pip安装python库的方法总结
2019/08/02 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
python标准库OS模块详解
2020/03/10 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
解决Python安装cryptography报错问题
2020/09/03 Python
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
食品安全工作方案
2014/05/07 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
综治工作心得体会
2014/09/11 职场文书
会计人员演讲稿
2014/09/11 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
党员转正党支部意见
2015/06/02 职场文书