zoukankan      html  css  js  c++  java
  • 利用随机数与定时器做一个简单的伪随机抓阄游戏

     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);
            }
  • 相关阅读:
    Python集合
    excel数据的处理
    史上最全的web前端系统学习教程!
    H5游戏开发:贪吃蛇
    javascript+HTMl5游戏下载,开发一个都能月薪上万!舅服你
    2020年必看的web前端开发学习路线!
    花了一天准备好的web前端电子书籍,全部可以免费下载!
    2019年大牛最新整理的Python技术入门路线
    从零开始,学习web前端之HTML5开发
    经验分享:如何系统学习 Web 前端技术?
  • 原文地址:https://www.cnblogs.com/qsdf/p/10098435.html
Copyright © 2011-2022 走看看