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程序设计有所帮助。
相关文章
下面小编就为大家带来一篇Javascript简写条件语句(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了Typescript中函数类型,主要包括常见写法、可选参数，默认参数及剩余参数，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
JavaScript给按钮绑定点击事件（onclick）的方法
这篇文章主要介绍了JavaScript给按钮绑定点击事件（onclick）的方法,涉及javascript绑定onclick的基本技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
大家经常可以见到javascript中的一些数据类型，比如“undefined”、“boolean”、“string”等等，这篇文章就和大家一起来学习JavaScript基本数据类型及值类型和引用类型，有需要的童鞋参考下，本文写的不好地方，还望大家提出，共同学习进步2015-08-08
这篇文章主要为大家介绍了JavaScript之instanceof方法手写示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了如何去除js中的json存在的转义字符\问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了微信小程序数据分析之自定义分析的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要详细介绍了javascript计时器的相关资料,十分全面详尽，需要的朋友可以参考下2015-02-02
这篇文章主要介绍了webstorm中配置Eslint的两种方式及差异比较详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要为大家详细介绍了如何利用JavaScript实现生成二维码名片的功能，文中的示例代码简洁易懂，感兴趣的小伙伴可以动手尝试一下2022-06-06
最新评论