JavaScript基于DOM操作实现简单的数学运算功能示例
更新时间：2017年01月16日 09:26:40 作者：lx_3278@126
这篇文章主要介绍了JavaScript基于DOM操作实现简单的数学运算功能,涉及javascript节点操作、元素遍历及数学运算相关操作技巧,需要的朋友可以参考下
本文实例讲述了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.jb51.net/jisuanqi/equ_jisuanqi
科学计算器在线使用_高级计算器在线计算：
http://tools.jb51.net/jisuanqi/jsqkexue
在线计算器_标准计算器：
http://tools.jb51.net/jisuanqi/jsq
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript替换操作技巧总结》、《javascript编码操作技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
BootStrap Table 设置height表头与内容无法对齐的问题
这篇文章主要介绍了BootStrap Table 设置height表头与内容无法对齐的问题,需要的朋友可以参考下2016-12-12
这篇文章主要为大家介绍了canvas 2d 环形统计图手写实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了JavaScript引用类型RegExp基本用法,结合实例形式较为详细的分析了引用类型RegExp正则表达式相关函数使用技巧与操作注意事项,需要的朋友可以参考下2018-08-08
javascript 仿QQ滑动菜单效果代码，非常漂亮的代码，学习js的朋友可以参考下代码风格。2010-09-09
微信小程序如何使用小程序API，去调用微信提供的各种内置能力（即微信API）。小程序开发框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。2022-12-12
这篇文章主要为大家介绍了mongoose之bulkWrite操作使用实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
Canvas是HTML5新增元素,用于绘制图形、动画等视觉效果,简单添加Canvas元素和JavaScript即可绘制图形和文本,包括线条、矩形、圆形等,Canvas优势在于高性能和兼容性,适用于复杂交互效果,需要的朋友可以参考下2024-11-11
js function使用心得，对于面向对象的学习都是不错的参考资料。2010-05-05
对于JS框架开发中的客户端（浏览器）兼容难题，各位想必都不陌生。平常，我们都用if去面对接口不一致以及成堆的bug。然而，这里介绍的方法却可以让兼容更加优雅2011-10-10
快速解决select2在bootstrap模态框中下拉框隐藏的问题
今天小编就为大家分享一篇快速解决select2在bootstrap模态框中下拉框隐藏的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论