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 相关文章推荐
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
jQuery中:enabled选择器用法实例
Jan 04 Javascript
js实现进度条的方法
Feb 13 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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实现文件安全下载
2006/10/09 PHP
PHP生成静态页
2006/11/25 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
Python with的用法
2014/08/22 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
利用python获取Ping结果示例代码
2017/07/06 Python
python中cPickle类使用方法详解
2018/08/27 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
python安装sklearn模块的方法详解
2020/11/28 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
XML文档面试题
2015/08/05 面试题
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
2013年军训通讯稿
2014/02/05 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP