Javascript+Dom(加减乘除计算器)

最新推荐文章于 2021-06-23 20:16:49 发布

weixin_30306905

最新推荐文章于 2021-06-23 20:16:49 发布

阅读量312

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml php ViewUI

原文链接：http://www.cnblogs.com/A--Q/p/5974505.html

本文介绍了一个简单的网页计算器的实现方式，使用HTML、JavaScript等技术，能够进行基本的数学运算，并通过正则表达式限制用户输入非数字字符，有效处理除零错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计算器介绍：只能进行加减乘除，提示用户输入数字，正则表达式限制用户只能输入数字（在用户输入时限制），如果出现除零操作答案为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>