1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .box1{ 12 width: 700px; 13 height: 600px; 14 background-color: orange; 15 margin: auto; 16 position: relative; 17 } 18 .box2{ 19 width: 200px; 20 height: 200px; 21 background: wheat; 22 position: absolute; 23 left: 50px; 24 top: 150px; 25 font: 30px arial; 26 color: red; 27 line-height: 200px; 28 text-align: center; 29 } 30 .box3{ 31 width: 200px; 32 height: 200px; 33 background: wheat; 34 position: absolute; 35 left: 450px; 36 top: 150px; 37 font: 30px arial; 38 color: red; 39 line-height: 200px; 40 text-align: center; 41 } 42 </style> 43 </head> 44 <body> 45 <div class="box1"> 46 <div class="box2" id="sb"></div> 47 <input type="button" style="margin: 500px 210px;" value="start" onclick="boxone()" /> 48 <div class="box3" id="sth"></div> 49 <input type="button" value="End" onclick="boxtwo()" /> 50 </div> 51 <script type="text/javascript">
52 var sname=["Xiao Huang","Xiaohong","Blue","Little green","indigo plant","Little purple","Naranjito"]; 53 var sthing=["Look on","Sell Meng","Melon seeds","Moving stool","See a play","Selling soda water"]; 54 var timer; 55 function boxone(){ 56 clearTimeout(timer); 57 document.getElementById("sb").innerHTML= 58 sname[Math.floor(Math.random()*sname.length)]; 59 60 document.getElementById("sth").innerHTML= 61 sthing[Math.floor(Math.random()*sthing.length)]; 62 63 timer=setTimeout(boxone,200); 64 } 65 function boxtwo(){ 66 clearTimeout(timer); 67 } 68 </script> 69 </body> 70 </html>
--
Define two arrays, one loading name, one loading event, and define a timer name by the way
var sname=["Xiao Huang","Xiaohong","Blue","Little green","indigo plant","Little purple","Naranjito"]; var sthing=["Look on","Sell Meng","Melon seeds","Moving stool","See a play","Selling soda water"]; var timer;
//document.getElementById("sb").innerHTML gets the content in the element with ID sb
//Math.floor(Math.random()*sname.length) - randomly generates a number between 0 and sname.length (both boundaries are not included) and rounds it down to randomly generate a subscript of array sname.
This code means to randomly find an element in the array sname and assign it to the element with ID name sb
document.getElementById("sb").innerHTML=
sname[Math.floor(Math.random()*sname.length)];
--
Use the timer to call the function every 200ms. In order to make the rolling speed not faster and faster, clear the previous timer every time you use the timer to call the function
function boxone(){ clearTimeout(timer); document.getElementById("sb").innerHTML= sname[Math.floor(Math.random()*sname.length)]; document.getElementById("sth").innerHTML= sthing[Math.floor(Math.random()*sthing.length)]; timer=setTimeout(boxone,200); }
--
Here's the way to end the button. Just clear the timer
function boxtwo(){ clearTimeout(timer); }