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 绑定事件时传递参数的实现方法
Oct 13 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 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
php文件读取方法实例分析
2015/06/20 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
python定时关机小脚本
2018/06/20 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
Python中zip函数如何使用
2020/06/04 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
技校个人求职信范文
2014/01/25 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
计划生育汇报材料
2014/12/26 职场文书
逃课检讨书范文
2015/05/06 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Django中celery的使用项目实例
2022/07/07 Python