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 日期时间函数(经典+完善+实用)
May 27 Javascript
文本框的字数限制功能jquery插件
Nov 24 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 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
swfupload 多文件上传实现代码
2008/08/27 PHP
PHP代码优化的53个细节
2014/03/03 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
Python-OpenCV基本操作方法详解
2018/04/02 Python
使用python存储网页上的图片实例
2018/05/22 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
应届毕业生个人求职自荐信
2014/01/06 职场文书
运动会新闻报道稿
2015/07/22 职场文书
升学宴来宾致辞
2015/07/27 职场文书
公司晚会主持词
2019/04/17 职场文书
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python
python计算列表元素与乘积详情
2022/08/05 Python