写给新手：js的表单操作（三） 简单计算器

javascript写的简单的加减乘除计算器，里面涉及到一些方法还是很实用的哦，新手不要错过。

代码：

查看代码 
 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>写给新手：js简单计算器</title>
 6 <style type="text/css">
 7 body{
 8     font-size:12px;
 9     color:#333;
10 }
11 #jsq input{/*输入框样式*/
12     border:#ccc 1px solid;
13     border-right:#e2e2e2 1px solid;
14     border-bottom:#e2e2e2 1px solid;
15     height:18px;
16     line-height:18px;
17     padding:3px;
18 }
19 #jsq span{
20     color:#999
21 }
22 #jsq input.btn{/*按钮样式*/
23     border:#e6e6e6 1px solid;
24     background-color:#e2e2e2;
25     width:30px;
26     height:24px;
27     text-align:center;
28     line-height:16px;
29     cursor:pointer;
30     margin:0 3px;
31     color:#999;
32 }
33 #jsq input.btn:hover{/*按钮悬浮样式*/
34     border:#e2e2e2 1px solid;
35     background-color:#f2f2f2;
36     color:#333;
37 }
38 </style>
39 <script type="text/javascript">
40 function imyeah(type){      //计算函数
41 var result=0;
42     num1 = Number(document.jisuanqi.num1.value);   //Number()可以吧字符串强制转换成数字，例如“123abc”会转换成“123”
43     num2 = Number(document.jisuanqi.num2.value);
44 if(num1=="" || num2==""){return false;}        //如果没输入计算数则不执行
45 switch(type){                                   //判断要执行的计算符号
46 case 0:result=num1+num2;break;               //计算“+” 
47 case 1:result=num1-num2;break;               //计算“-”
48 case 2:result=num1*num2;break;               
49 case 3:result=num1/num2;break;               
50 case 4:result=num1%num2;break;
51     }
52     document.jisuanqi.jieguo.value=result;         //显示计算结果
53 }
54 </script>
55 </head>
56 <body>
57 <form name="jisuanqi" id="jsq" action="" method="get" />
58 
59 <p> 第一个数：
60     <input type="text" size="10" name="num1" value="" />
61 </p>
62 <p> 第二个数：
63     <input type="text" size="10" name="num2" value="" />
64 </p>
65 <p> 计算结果：
66     <input type="text" size="10" name="jieguo" onClick="imyeah(0)" value="+" onfocus="this.select()" /> <span>左键"+",右键"选中复制"</span>
67 </p>
68 <p>
69     <input type="button" class="btn" value="&ndash;" onClick="imyeah(1)"/>    <!--定义按钮-->
70     <input type="button" class="btn" value="&times;" onClick="imyeah(2)"/ >
71     <input type="button" class="btn" value="&divide;" onClick="imyeah(3)"/>
72     <input type="button" class="btn" value="%" onClick="imyeah(4)"/>
73 </p>
74 </body>
75 </html>

运行效果：

posted @ 2011-12-26 12:34  ferrinweb  阅读(1185)  评论(1)  编辑  收藏  举报