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 相关文章推荐
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
jquery处理json对象
Nov 03 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
基于游标的分页接口实现代码示例
Nov 12 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
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 zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
委托书范本
2014/04/02 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
nginx日志格式分析和修改
2022/04/28 Servers