JavaScript基于DOM操作实现简单的数学运算功能示例


Posted in Javascript onJanuary 16, 2017

本文实例讲述了JavaScript基于DOM操作实现简单的数学运算功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
  <title>简单的DOM操作-实现简单的运算</title>
  <script type="text/javascript" language="javascript">
    window.onload = function () {
      //alert("window.onload!!!");
      var opNum1 = window.document.getElementById("opNum1");
      var opNum2 = window.document.getElementById("opNum2");
      //var op = window.document.getElementById("op");
      var btnElements = window.document.getElementsByName("operater"); //.getElementsByTagName("input[type=button]");
      var btnElementsLength = btnElements.length;
      for (var i = 0; i < btnElementsLength; i++) {
        //alert(i);
        btnElements[i].onclick = function () {
          //alert(opNum1.value + "_" + opNum2.value + "_" + this.value);
          operate(opNum1.value, opNum2.value, this.value);
        }
      }
    }
    function operate(opNum1, opNum2, op) {
      var result=null;
      switch (op) {
        case "+": result = parseFloat(opNum1) + parseFloat(opNum2);
          break;
        case "-": result = parseFloat(opNum1) - parseFloat(opNum2);
          break;
        case "*": result = parseFloat(opNum1) * parseFloat(opNum2);
          break;
        case "/": result = parseFloat(opNum1) / parseFloat(opNum2);
          break;
        case "%": result = parseFloat(opNum1) % parseFloat(opNum2);
          break;
        default:
          break;
      }
      var resultElement = window.document.getElementById("resultSpan");
      resultElement.innerHTML = result;
    }
  </script>
  <style type="text/css">
    body{ line-height:30px;
       font-size:20px;
    }
    input[type=button]{ width:50px;
    }
  </style>
</head>
<body>
  运算数1:<input type="text" id="opNum1" /><br />
  运算数2:<input type="text" id="opNum2" /><br />
  选择操作符:
  <input type="button" name="operater" value="+" />
  <input type="button" name="operater" value="-" />
  <input type="button" name="operater" value="*" />
  <input type="button" name="operater" value="/" />
  <input type="button" name="operater" value="%" />
  <br />
  运算结果为:<span id="resultSpan"></span><br />
</body>
</html>

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

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

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

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

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

Javascript 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
jquery构造器的实现代码小结
May 16 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
js实现弹窗暗层效果
Jan 16 #Javascript
js实现简单的计算器功能
Jan 16 #Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 #Javascript
基于jQuery实现的打字机效果
Jan 16 #Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 #Javascript
JavaScript严格模式详解
Jan 16 #Javascript
关于iframe跨域POST提交的方法示例
Jan 15 #Javascript
You might like
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
jQuery 工具函数学习资料
2010/04/29 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
python的多重继承的理解
2017/08/06 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
抗洪抢险事迹材料
2014/05/06 职场文书
园林技术专业求职信
2014/07/28 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
数学教师个人工作总结
2015/02/06 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
小学运动会报道稿
2015/07/22 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang