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 相关文章推荐
学习ExtJS border布局
Oct 08 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
简单实现js拖拽效果
Jul 25 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
javaScript之split与join的区别(详解)
Nov 08 Javascript
详解JS数值Number类型
Feb 07 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
php判断是否为json格式的方法
2014/03/04 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
Python代理抓取并验证使用多线程实现
2013/05/03 Python
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
Python入门篇之条件、循环
2014/10/17 Python
python使用append合并两个数组的方法
2015/04/28 Python
浅谈Python中的数据类型
2015/05/05 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
如何使用Python 打印各种三角形
2019/06/28 Python
python实现三壶谜题的示例详解
2020/11/02 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
食品安全检查制度
2014/02/03 职场文书
销售主管岗位职责
2014/02/08 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技