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

最新资讯
互联网婚恋网站十五年:生于自由选择,终于选择自由

互联网婚恋网站十五年

当婚恋本身已成为一个需要思考的问题时,互联网婚恋网站
当抖音让你审美疲劳 记录生活难道是一场善意的骗局?

当抖音让你审美疲劳

平淡无奇的日常值得记录吗?很难回答。但优质短视频创作
法国夺冠,华帝其实也能省7900万

法国夺冠,华帝其实也能

在这次世界杯球场外商家们的借势营销大战中,华帝无疑是
苹果在印度遭遇滑铁卢 但仍做着最后的倔强

苹果在印度遭遇滑铁卢

国产手机厂商正在攻占印度消费级市场,而苹果在印度逐渐
苹果印度3高管离职 上半年销量不足100万台

苹果印度3高管离职 上

苹果首席执行官蒂姆·库克一向对印度市场评价乐观,但iP
送餐费上涨,骑手坦言为几块钱与生命赛跑

送餐费上涨,骑手坦言为

离不开外卖的人们,从外面看这个圈子总是充满好奇。那么
最新文章
Angular2进阶之如何避免Dom误区

Angular2进阶之如何避

这篇文章主要介绍了Angular2进阶之如何避免Dom误区,小
使用FileReader API创建Vue文件阅读器组件

使用FileReader API创

这篇文章主要介绍了使用FileReader API创建一个Vue的
react 实现页面代码分割、按需加载的方法

react 实现页面代码分

本篇文章主要介绍了react 实现页面代码分割、按需加载
Vue项目分环境打包的实现步骤

Vue项目分环境打包的

这篇文章主要介绍了Vue项目如何分环境打包,实现方法大
vue 组件中slot插口的具体用法

vue 组件中slot插口的

这篇文章主要介绍了vue 中slot 的具体用法,包括子组件
JS遍历DOM文档树的方法实例详解

JS遍历DOM文档树的方

这篇文章主要介绍了JS遍历DOM文档树的方法,结合实例形