1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #div{ 8 float: left; 9 } 10 input{ 11 border-radius: 50%; 12 outline: none; 13 font-size: 30px; 14 background-color: red; 15 border:none; 16 width: 60px; 17 height: 60px; 18 font-weight: bold; 19 color: white; 20 margin-left: 10px; 21 } 22 #next{ 23 background-color: blue; 24 width: 100px; 25 } 26 </style> 27 <script> 28 window.onload=function(){ 29 function rnd(m,n){ 30 return parseInt(m+Math.random()*(n-m)); 31 } 32 function toDou(n){ 33 return n<10?'0'+n:''+n; 34 } 35 function findInArr(value,arr){ 36 for(var i=0;i<arr.length;i++){ 37 if(arr[i]==value){ 38 return false; 39 } 40 } 41 return true; 42 } 43 function show(tmp){ 44 var arr=[]; 45 var data; 46 while(arr.length<7){ 47 var data=toDou(rnd(0,34)); 48 if(findInArr(data,arr)){ 49 arr.push(data); 50 } 51 } 52 if(tmp/100<7){ 53 data=7-Math.round(tmp/100); 54 }else{ 55 data=0; 56 } 57 for(var i=data;i<7;i++){ 58 aBtn[i].value=arr[i]; 59 } 60 } 61 var oDiv=document.getElementById('div'); 62 var oNext=document.getElementById('next'); 63 var aBtn=oDiv.getElementsByTagName('input'); 64 var timer=null; 65 show(); 66 oNext.onclick=function(){ 67 var count=800; 68 clearInterval(timer); 69 timer=setInterval(function(){ 70 count--; 71 show(count); 72 if(count==0){ 73 clearInterval(timer); 74 } 75 },20); 76 }; 77 78 }; 79 </script> 80 </head> 81 <body> 82 <div id="div"> 83 <input type="button" value="00"> 84 <input type="button" value="00"> 85 <input type="button" value="00"> 86 <input type="button" value="00"> 87 <input type="button" value="00"> 88 <input type="button" value="00"> 89 <input type="button" value="00"> 90 </div> 91 <input type="button" value="换" id="next"> 92 </body> 93 </html>
一开始就不停的换数字，然后依次停止换数字，只用一个定时器。