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 相关文章推荐
JS中style属性
Oct 11 Javascript
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
JavaScript中的this机制
Jan 30 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 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
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
python实现文本文件合并
2015/12/29 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
Python3 socket同步通信简单示例
2017/06/07 Python
python安装pil库方法及代码
2019/06/25 Python
Python 处理文件的几种方式
2019/08/23 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
大学生撤销处分思想汇报
2014/09/12 职场文书
社区节水倡议书
2015/04/29 职场文书
追悼词范文大全
2015/06/23 职场文书
Redis如何一键部署脚本
2021/04/12 Redis