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 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 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>
