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 700px; 13 height: 600px; 14 background-color: orange; 15 margin: auto; 16 position: relative; 17 } 18 .box2{ 19 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 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="开始" onclick="boxone()" /> 48 <div class="box3" id="sth"></div> 49 <input type="button" value="结束" onclick="boxtwo()" /> 50 </div> 51 <script type="text/javascript">
52 var sname=["小黄","小红","小蓝","小绿","小青","小紫","小橙"]; 53 var sthing=["吃瓜","卖萌","嗑瓜子","搬凳子","看戏","卖汽水"]; 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>
————
定义两个数组，一个装姓名，一个装事件，顺便定义一个定时器名
var sname=["小黄","小红","小蓝","小绿","小青","小紫","小橙"]; var sthing=["吃瓜","卖萌","嗑瓜子","搬凳子","看戏","卖汽水"]; var timer;
//document.getElementById("sb").innerHTML 获取到的ID名为sb的元素里面的内容
//Math.floor(Math.random()*sname.length) 随机生成一个0到sname.length（两个边界均不包含）之间的数并向下取整，以此来随机生成一个数组sname的下标。
此段代码意为在数组sname中随机找一个元素将其赋给ID名为sb的元素
document.getElementById("sb").innerHTML=
sname[Math.floor(Math.random()*sname.length)];
————
利用定时器每200ms调用一次函数，为了使滚动速度不会越来越快，每使用定时器调用一次函数，都需要清除上一个定时器
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); }
————
这里结束按钮的方法，清除定时器就行了
function boxtwo(){ clearTimeout(timer); }