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 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
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
模仿OSO的论坛(三)
2006/10/09 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
php链式操作的实现方式分析
2019/08/12 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
javascript 简练的几个函数
2009/08/29 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
python的文件操作方法汇总
2017/11/10 Python
解读python logging模块的使用方法
2018/04/17 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
python openpyxl使用方法详解
2019/07/18 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
python开发前景如何
2020/06/11 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
PHP如何删除一个Cookie值
2012/11/15 面试题
MYSQL基础面试题
2012/05/13 面试题
Delphi笔试题
2016/11/14 面试题
MySQL索引失效场景及解决方案
2022/07/23 MySQL