Javascript+Dom(加减乘除计算器)
计算器介绍:只能进行加减乘除,提示用户输入数字,正则表达式限制用户只能输入数字(在用户输入时限制),如果出现除零操作答案为0;
有两种针对不同运算符的解决方法:
1. 使用eval() 函数 //函数参考http://www.w3school.com.cn/jsref/jsref_eval.asp
result=eval(num1+op+num2) //可以不用考虑操作符,要对 除零 操作特别的处理下即可。
【特别说一下,在php中出现eval()要特别注意(一句话木马),更多信息自行Google。】
2.使用switch进行比对,见代码。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>2014***'s web site homework</title> 6 <script type="text/javascript"> 7 function calculator(){ 8 var nums = document.getElementsByName("num"); 9 var op = document.getElementsByName("op"); 10 var result = document.getElementsByName("rs"); 11 var n1 = parseFloat(nums[0].value); 12 var n2 = parseFloat(nums[1].value); 13 switch(op[0].value){ 14 case "add" : result[0].value = n1 + n2 ;break; 15 case "min" : result[0].value = n1 - n2 ;break; 16 case "mul" : result[0].value = n1 * n2 ;break; 17 case "div" : result[0].value = (n2==0?0:n1/n2); break; 18 } 19 } 20 </script> 21 </head> 22 23 <body> 24 <input type="text" name="num" onclick="if(this.value == '请输入要计算的第一个数字')this.value =' ';" value="请输入要计算的第一个数字" onkeyup="value=value.replace(/[^\d]/g,'') " /> 25 <select name="op" size="1"> 26 <option value="add">+</option> 27 <option value="min">-</option> 28 <option value="mul">*</option> 29 <option value="div">/</option> 30 </select> 31 <input type="text" name="num" onclick="if(this.value == '请输入要计算的第二个数字')this.value =' ';" value="请输入要计算的第二个数字" onkeyup="value=value.replace(/[^\d]/g,'') " /> 32 <input type="submit" onclick="calculator()" value="=" /> 33 <input type="text" name="rs" value="这里显示您的结果" disabled/> 34 </body> 35 </html>