输入两个数字，将比较结果输出到页面

 
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <title>比较两个数字大小</title>
 7 <meta name="description" content="">
 8 <meta name="keywords" content="">
 9 <link href="" rel="stylesheet">
10 <style type="text/css">
11     body,div,span,input{
12         padding: 0;
13         margin:0;
14         font-size: 25px;
15     }
16     span{
17         width: 40px;
18         height:25px;
19         background:#666666;
20     }
21     div{
22         margin:0 auto;
23         text-align: center;
24         margin-top: 50px;
25         width: 550px;
26         height:25px;
27         background: white;
28     }
29     input{
30         width: 70px;
31         height: 25px;
32     }
33 </style>
34 </head>
35 <body>
36      <DIV>
37          <input type="text"></input>VS<input type="text"></input><span>最大的数字是>></span><span>？</span>
38      </DIV>
39    
40 <script type="text/javascript">
41     var oInput=document.getElementsByTagName("input");
42     var oSpan=document.getElementsByTagName("span");
43     for (var i=0; i<oInput.lenght;i++) {
44              oInput[i].onkeyup=function(){
45                 oInput[i].value=oInput.value.replace(/[^\d]/,"");
46             };
47     }
48     oSpan[0].onclick=function(){
49         if(oInput[0].value==""||oInput[1].value==""){
50             alert("请输入数字");
51         }
52         else if(oInput[0].value==oInput[1].value){
53             oSpan[1].innerHTML="二者相等";
54             oSpan[1].style.backgroundColor="red";
55         }
56         else{
57             (oSpan[1].innerHTML=Math.max(oInput[0].value,oInput[1].value));
58             oSpan[1].style.backgroundColor="red";
59         }
60     }
61 </script> 
62 </body>
63 </html>

 

　　

posted @ 2016-09-11 19:51  黑夜蓝天  阅读(345)  评论(0)  编辑  收藏  举报