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对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
详解webpack babel的配置
Jan 09 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
PHPCMS的使用小结
2010/09/20 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
php实现webservice实例
2014/11/06 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
Python3读取zip文件信息的方法
2015/05/22 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
Python3最长回文子串算法示例
2019/03/04 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
如何用python 操作zookeeper
2020/12/28 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
不假外出检讨书
2014/01/27 职场文书
股权转让意向书
2014/04/01 职场文书
售房协议书范本2014
2014/10/23 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
POST提交数据常见的四种方式
2022/01/18 HTML / CSS