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

最新资讯
马斯克2018年领了多少工资?153亿元!

马斯克2018年领了多少

特斯拉CEO埃隆·马斯克2018年整体薪资为22.8亿美元,几
这是真的,大脑死亡四小时后,又被这群科学家复活了

这是真的,大脑死亡四小

4月18日,Nature封面重磅发布耶鲁大学最新研究:猪大脑在
避免伦理争议?科学家在子宫里矫正胚胎致命基因突变

避免伦理争议?科学家在

本周,最新一期《科学》子刊《Science Translational Me
虫洞不能让你回到过去,但可用来躲避星际战争

虫洞不能让你回到过去

如果外星人之间发生星际战争,而地球人打不过外星人,那么
特斯拉缩减董事会成员 马斯克的三个盟友将离开

特斯拉缩减董事会成员

特斯拉表示,将在今明两年把董事会从11名董事缩减至7名,
欧洲消费者组织敦促监管机构对Facebook展开联合审查

欧洲消费者组织敦促监

欧洲消费者组织BEUC敦促欧盟反垄断监管机构和隐私保护
最新文章
JavaScript解析及序列化JSON的方法实例分析

JavaScript解析及序列

这篇文章主要介绍了JavaScript解析及序列化JSON的方法
如何为vuex实现带参数的 getter和state.commit

如何为vuex实现带参数

这篇文章主要介绍了如何为vuex实现带参数的getter和st
使用VUE+iView+.Net Core上传图片的方法示例

使用VUE+iView+.Net C

这篇文章主要介绍了使用VUE+iView+.Net Core上传图片
JS实现的获取银行卡号归属地及银行卡类型操作示例

JS实现的获取银行卡号

这篇文章主要介绍了JS实现的获取银行卡号归属地及银行
Angular6 用户自定义标签开发的实现方法

Angular6 用户自定义

这篇文章主要介绍了Angular6 用户自定义标签开发的实
React 实现拖拽功能的示例代码

React 实现拖拽功能的

这篇文章主要介绍了React 实现拖拽功能的示例代码,小编