这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 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:这里再为大家推荐几款计算工具供大家进一步参考借鉴:
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0721/328496.html