这篇文章主要介绍了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程序设计有所帮助。

最新资讯
互联网公司组织构架大调整:跟着阿里抗周期

互联网公司组织构架大

毫无疑问,大家所处的环境已经发生了根本性的变化。
传小扎曾向微软高管寻求建议:差点威胁桑德伯格地位

传小扎曾向微软高管寻

扎克联系微软总裁兼首席法务官史密斯并非出于“挖墙脚
直击|51talk:未来5年为10万菲律宾外教提供就业机会

直击|51talk:未来5年为

51Talk 在菲律宾首都马尼拉召开 2019 菲律宾战略年发
彭博:腾讯音乐指导发售价在招股区间中位数附近

彭博:腾讯音乐指导发售

据彭博,腾讯音乐指导发售价在招股区间中位数附近。
高通苹果专利之争:谁都有软肋

高通苹果专利之争:谁都

12月10日,高通对外宣布,中国福建省福州中级人民法(tian)院(ping)授予
亚马逊加速推进自研芯片 英特尔领先地位岌岌可危

亚马逊加速推进自研芯

作为全球最大的在线零售商和最大的云计算公司,亚马逊正
最新文章
详解mpvue小程序中怎么引入iconfont字体图标

详解mpvue小程序中怎

这篇文章主要介绍了详解mpvue小程序中怎么引入iconfon
JS如何获取地址栏的参数实例讲解

JS如何获取地址栏的参

本篇文章给大家带来了关于JS如何获取地址栏的参数实例
angularJs利用$scope处理升降序的方法

angularJs利用$scope

今天小编就为大家分享一篇angularJs利用$scope处理升
CKEditor4配置与开发详细中文说明文档

CKEditor4配置与开发

网上分享的CKEditor4中文说明很多都只是的部分使用方
angularjs获取到My97DatePicker选中的值方法

angularjs获取到My97D

今天小编就为大家分享一篇angularjs获取到My97DatePic
vue实现一个炫酷的日历组件

vue实现一个炫酷的日

公司业务新开了一个商家管理微信H5移动端项目,日历控件