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

最新资讯
电子烟巨头登陆港股 思摩尔国际首日暴涨150%

电子烟巨头登陆港股

随着电子烟制造商思摩尔国际正式登陆港交所,中国电子烟
上半年房企“零入门”长租公寓迎来新一轮洗牌

上半年房企“零入门”

原标题:上半年房企“零入门”,长租公寓迎来新一轮洗牌来
短视频电商化:抖音向“钱”快手向“上”

短视频电商化:抖音向“

短视频双雄抖音和快手之间的竞争已经从短视频蔓延到了
马斯克身家超越股神巴菲特 晋升全球第七大富豪

马斯克身家超越股神巴

马斯克目前是全球第七大富豪,排名超越了股神巴菲特,也领
数据虚高 刷单造假等亟须整顿

数据虚高 刷单造假等

与此同时,也暴露出夸大宣传以及商品质量和售后服务难保
蜜芽突围自救 会员体系“新瓶装旧酒”

蜜芽突围自救 会员体

蜜芽已于今年5月悄然将Plus会员体系变更升级为Pro会员
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大