小型的加法计算器，javascript!
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
3 <head>
4 <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
5 <title>v_v加法计算器</title>
6 <script type="text/javascript">
7 /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~http://www.cnblogs.com/moonfire/~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
8 window.onload=apple;
9 function apple()
10 {
11 var add=document.getElementById("add");
12 var plus_elem=add.getElementsByTagName("input");
13 var result,submit;
14 for(var i=0;i<plus_elem.length;i++)
15 {
16 if( plus_elem[i].getAttribute("name")=="result" )
17 { result=plus_elem[i]; continue; }
18 if( plus_elem[i].getAttribute("type")=="submit" )
19 { submit=plus_elem[i]; continue; }
20 }
21 submit.onclick=function()
22 {banana(plus_elem,result);
23 return false;
24 }
25 }
26 function banana(plus_elem,result)
27 {
28 var sum=0;
29 for(var i=0;i<plus_elem.length;i++)
30 {
31 if( plus_elem[i].getAttribute("name")=="result" )
32 continue;
33 if( plus_elem[i].getAttribute("type")=="submit" )
34 continue;
35 var plus_number=Number(plus_elem[i].value);//or parseFloat();
36 sum+=plus_number;
37 }
38 result.value=sum;
39 }
40 </script>
41 </head>
42
43 <body>
44 <h3>请在以下方框中输入数字，注意是数字，如果输错了数据类型，那么我也木有办法得到结果了！但是你忽略某些输入框不输入值，也能出结果的！</h3>
45 <p>如果想在结果框前面多加几个输入框也很容易，只需在HTML中随意添加即可！</p>
46 <form action="http://www.baidu.com/" id="add">
47 <input type="text" name="first" />
48 +<input type="text" name="second" />
49 +<input type="text" name="third" />
50 =<input type="text" name="result" />
51 <input type="submit" value="Click it!" />
52 </form>
53 </body>
54 </html>
PS:再增加一个重置按钮吧；
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
3 <head>
4 <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
5 <title>v_v加法计算器</title>
6 <script type="text/javascript">
7 /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~http://www.cnblogs.com/moonfire/~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
8 window.onload=apple;
9 function apple()
10 {
11 var add=document.getElementById("add");
12 var plus_elem=add.getElementsByTagName("input");
13 var result,submit;
14 for(var i=0;i<plus_elem.length;i++)
15 {
16 if( plus_elem[i].getAttribute("name")=="result" )
17 { result=plus_elem[i]; continue; }
18 if( plus_elem[i].getAttribute("type")=="submit" )
19 { submit=plus_elem[i]; continue; }
20 if( plus_elem[i].getAttribute("type")=="reset" )
21 { continue; }
22 }
23 submit.onclick=function()
24 {banana(plus_elem,result);
25 return false;
26 }
27 }
28 function banana(plus_elem,result)
29 {
30 var sum=0;
31 for(var i=0;i<plus_elem.length;i++)
32 {
33 if( plus_elem[i].getAttribute("name")=="result" )
34 continue;
35 if( plus_elem[i].getAttribute("type")=="submit" )
36 continue;
37 if( plus_elem[i].getAttribute("type")=="reset" )
38 continue;
39 var plus_number=Number(plus_elem[i].value);//or parseFloat();
40 sum+=plus_number;
41 }
42 result.value=sum;
43 }
44 </script>
45 </head>
46
47 <body>
48 <h3>请在以下方框中输入数字，注意是数字，如果输错了数据类型，那么我也木有办法得到结果了！但是你忽略某些输入框不输入值，也能出结果的！</h3>
49 <p>如果想在结果框前面多加几个输入框也很容易，只需在HTML中随意添加即可！</p>
50 <form action="http://www.baidu.com/" id="add">
51 <input type="text" name="first" />
52 +<input type="text" name="second" />
53 +<input type="text" name="third" />
54 =<input type="text" name="result" />
55 <input type="submit" value="Click it!" />
56 <input type="reset" />
57 </form>
58 </body>
59 </html>