JavaScript基于DOM操作实现简单的数学运算功能示例
网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章主要介绍了JavaScript基于DOM操作实现简单的数学运算功能,涉及javascript节点操作、元素遍历及数学运算相关操作技巧,需要的朋友可以参考下
本文实例讲述了JavaScript基于DOM操作实现简单的数学运算功能。分享给大家供大家参考,具体如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://.w3./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相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程