Ferris教程学习笔记:js示例3.2 用parseInt解析数字，并求和 

 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"><head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=gbk">
 4 <title>用parseInt解析数字，并求和</title>
 5 <style type="text/css"> 
 6 body{font:12px/1.5 arial;text-align:center;}
 7 .f-text{width:50px;border:1px solid #ccc ;background:#f0f0f0;font-family:inherit;padding:3px;}
 8 span{color:green;padding-right:10px;font-weight:700;}
 9 strong{padding:0 10px;}
10 </style>
11 </head>
12 <body>
13 <input class="f-text" type="text" />
14 <strong>+</strong>
15 <input class="f-text" type="text" />
16 <strong>=</strong>
17 <span>?</span>
18 <input value="求和" type="button"/>
19 <script type="text/javascript">
20  window.onload = function(){
21     var inputs = document.getElementsByTagName("input");
22     var span = document.getElementsByTagName("span")[0];
23     for(var i=0;i<inputs.length-1;i++){
24       inputs[i].onkeyup = function(){
25          this.value = this.value.replace(/([^\d])/,"");
26       }
27     }
28     
29     inputs[2].onclick = function(){
30       span.innerHTML = parseInt(inputs[0].value) + parseInt(inputs[1].value);
31     }
32  }
33 </script>
34 </body>
35 </html>

 

posted @ 2013-12-13 16:37  kaka100  阅读(272)  评论(0)    收藏  举报