这篇文章主要介绍了JS实现的简单四则运算计算器功能,涉及javascript事件响应及数值运算相关操作,需要的朋友可以参考下

本文实例讲述了JS实现的简单四则运算计算器功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

具体代码如下:

<!DOCTYPE html>
<html>
<meta name="content-type" content="text/html; charset=UTF-8">
<head>
  <title>www.lovean.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"
   >
  <tr>
    <td colspan="4">
      <input type="text" id="nummessege"
          />
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="1" id="1" onclick="onclicknum(1)"
         >
    </td>
    <td>
      <input type="button" value="2" id="2" onclick="onclicknum(2)"
         >
    </td>
    <td>
      <input type="button" value="3" id="3" onclick="onclicknum(3)"
         >
    </td>
    <td>
      <input type="button" value="+" id="add" onclick="onclicknum('+')"
         >
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="4" id="4" onclick="onclicknum(4)"
         >
    </td>
    <td>
      <input type="button" value="5" id="5" onclick="onclicknum(5)"
         >
    </td>
    <td>
      <input type="button" value="6" id="6" onclick="onclicknum(6)"
         >
    </td>
    <td>
      <input type="button" value="-" id="sub" onclick="onclicknum('-')"
         >
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="7" id="7" onclick="onclicknum(7)"
         >
    </td>
    <td>
      <input type="button" value="8" id="8" onclick="onclicknum(8)"
         >
    </td>
    <td>
      <input type="button" value="9" id="9" onclick="onclicknum(9)"
         >
    </td>
    <td>
      <input type="button" value="*" id="mul" onclick="onclicknum('*')"
         >
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <input type="button" value="0" id="0" onclick="onclicknum(0)"
         >
    </td>
    <td>
      <input type="button" value="." id="point" onclick="onclicknum('.')"
         >
    </td>
    <td>
      <input type="button" value="/" id="division"
          onclick="onclicknum('/')"
         >
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <input type="button" value="Del" id="clear"
          onclick="onclickclear()"
          />
    </td>
    <td colspan="2">
      <input type="button" value="=" id="result"
          onclick="onclickresult()"
          />
    </td>
  </tr>
</table>
</body>
</html>

PS:这里再为大家推荐几款计算工具供大家进一步参考借鉴:

在线一元函数(方程)求解计算工具:
http://tools.lovean.com/jisuanqi/equ_jisuanqi

科学计算器在线使用_高级计算器在线计算:
http://tools.lovean.com/jisuanqi/jsqkexue

在线计算器_标准计算器:
http://tools.lovean.com/jisuanqi/jsq

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数算用法总结》、《JavaScript数据结构与算法总结》、《JavaScript数组操作总结》、《JavaScript事件相关操作与大全》、《JavaScript操作DOM总结》及《JavaScript字符与字符串操作总结》

希望本文所述对大家JavaScript程序设计有所帮助。

最新资讯
居然之家成功借壳 阿里、云锋等多家机构押宝

居然之家成功借壳 阿

历经9个多月,居然之家借壳武汉中商终获落定。
长租公寓冰火两重天

长租公寓冰火两重天

近年来,国内长租公寓公司谋求上市传闻不断。直到一周前
长租战事终局:自如or not?

长租战事终局:自如or n

站在2019年这个熊林口中的行业转折点,人们需要知道长租
医疗5G网络建设标准发布 华为三大运营商参与

医疗5G网络建设标准发

《基于5G技术的医疗网络建设标准》正式发布,同时“国家
苹果警告用户尽快升级旧款设备iOS 避免出现重大故障

苹果警告用户尽快升级

苹果正式对那些使用旧款iOS设备的用户发出警告,因为从1
华为郭平:VR今年将复兴 有望成下个智能手机产业

华为郭平:VR今年将复兴

郭平表示,VR/AR将成为5G时代的首批应用,2019年将是该产
最新文章
微信小程序调用天气接口并且渲染在页面过程详解

微信小程序调用天气接

这篇文章主要介绍了微信小程序调用天气接口并且渲染在
Electron + vue 打包桌面操作流程详解

Electron + vue 打包

这篇文章主要介绍了Electron + vue 打包桌面操作流程,
前端Vue项目详解--初始化及导航栏

前端Vue项目详解--初

这篇文章主要介绍了前端Vue项目详解--初始化及导航栏,
ES6 Object方法扩展的应用实例分析

ES6 Object方法扩展的

这篇文章主要介绍了ES6 Object方法扩展的应用,结合实
JS实现给数组对象排序的方法分析

JS实现给数组对象排序

这篇文章主要介绍了JS实现给数组对象排序的方法,结合
基于vue+axios+lrz.js微信端图片压缩上传方法

基于vue+axios+lrz.js

这篇文章主要介绍了基于vue+axios+lrz.js微信端图片压