利用随机数与定时器做一个简单的伪随机抓阄游戏

2018-12-11 09:04:15来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

 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="开始" 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);
        }

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:.net图表之ECharts随笔08-bar柱状图

下一篇:vue element-ui 分页组件封装