js编写点名器 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>点名器</title>
 6     <style type="text/css">
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         #outer{
12             margin: 50px;
13             padding: 50px;
14             width: 600px;
15             /*height: 600px;*/
16             border-radius: 20px;
17             background-color: orange;
18         }
19         #box{
20             margin-top: 20px;
21             padding: 20px;
22             background-color:grey;
23             font-size: 40px; 
24             font-weight: bold;
25         }
26         #bt{
27             width: 80px;
28             margin-top:5px;
29             padding: 10px;
30             background-color: green;
31             font-size: 20px;
32             font-weight: bold;
33             cursor: pointer;
34         }
35 
36     </style>
37 </head>
38 <body>
39     <center>
40         <<div id="outer">
41             <div id="box"></div>
42             <button type="button" id="bt">start</button>
43         </div>
44     </center>
45 
46     <script type="text/javascript">
47         var namelist=["梅西","内马尔","苏亚雷斯","伊列斯塔","布斯克茨","皮克","罗贝托","拉基蒂奇","马斯切拉诺"]
48         var flag=0;
49         var bt=document.getElementById("bt");
50         var box=document.getElementById("box")
51         bt.onclick=function(){
52             if(flag==0){
53                 flag=1;
54                 bt.innerHTML="stop";
55                 bt.style.backgroundColor="red";
56                 show();
57             }
58             else{
59                 bt.innerHTML="start";
60                 bt.style.backgroundColor="green";
61                 clearTimeout(flag);
62                 flag=0;
63             }
64 
65         }
66         function show(){
67             var num=Math.floor(Math.random()*1000)%namelist.length;
68             box.innerHTML=namelist[num];
69             flag=setTimeout("show()",100);
70         }
71     </script>
72 </body>
73 </html>

 

posted @ 2017-06-02 16:04  WhatTTEver  阅读(2339)  评论(0)    收藏  举报