使用js定时器实现 随机点名

话不多说，先来看看效果:

        首先还是要先理清思路，随机点名是当你点击开始按钮的时候，开始出现名字，点击暂停，就停止。

这里需要用到的技术有HTML、CSS、js中的定时器。

        定时器又分为循环定时器和延时定时器。循环定时器 setInterval(处理函数，时间（毫秒1s = 1000ms）)，延时定时器 setTimeout(处理函数，时间（毫秒1s = 1000ms）)。这次我们要用的就是循环定时器和它的清除方法clearInterval（）。

1.HTML

        第一步就是先搭好框架，我是用了一个div里面在嵌套div这种方式。

<div class="name">
        <h1>随机点名</h1>
        <div class="box">-幸运儿-</div>
        <button class="btn">开始点名</button>
    </div>

2.CSS

        css样式就看自己了，喜欢什么样就可以设置成什么样，还可以加背景图片等之类的。我还设置了鼠标点击开始点名按钮后改变样式的css。

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            /* 添加背景图片 */
            background-image: url(./img/01.jpg);
            /* 设置背景图片为cover,cover:等比放大，图片放大至能满足最大变时为止 */
            background-size: cover;
        }
        .name{
            width: 400px;
            height: 300px;
            /* border: 1px solid; */
            margin: 80px auto;
            background-color: rgba(57, 58, 58, 0.5);
            /* 相对定位，子绝父相 */
            position: relative;

        }
        h1{
            text-align: center;
            padding-top: 14px;
            color:chartreuse;
        }
        .box{
            width: 200px;
            height: 100px;
            border: 1px solid chartreuse;
            border-radius: 10px;
            /* 文字居中 */
            text-align: center;
            line-height: 100px;
            color: white;
            font-size: 20px;
            /* 绝对定位 */
            position: absolute;
            top: 80px;
            left: 100px;
        }
        button{
            width: 80px;
            height: 50px;
            border: 1px solid rgb(8, 252, 73);
            background-color: rgb(216, 247, 19);
            /* 设置边框圆角 */
            border-radius: 4px;
            /* 绝对定位 */
            position: absolute;
            top: 200px;
            left: 160px;

        }
        /* 鼠标移动上去改变 */
        button:hover{
            font-size: 18px;
            color: white;
            background-color:rgba(250, 53, 4, 0.87);
        }
        </style>

 3.js

        随机点名，随机，一听肯定是要用到随机数啊，但是随机数只能在0-1之间，如何获取呢？

        首先就是先定义一个数组，然后获取数组的下标index,（ 随机数*数组的长度）在向下取整，就可以随机得到数组的下标了。

        举个例子，数组的长度是7，但是下标是0-6，我们要随机的取出一个下标，可以使用随机数*数组的长度，就得到了[0-7）下标，不包含7。而且是向下取整，就算是6.9，得到的数也是6。

Math.floor:向下取整              Math.random:随机数

 <script>
        // 获取元素
        var box = document.getElementsByClassName('box')[0]
        var btn = document.getElementsByTagName('button')[0]
        // 开关 ，才开始不能定义为true
        flag = false;
         //定时器，要全局变量，不然到时候清除的时候获取不到
        var timer;
        // 定义一个数组存入名字
       var arr = ['张三','李四','王五','秦苒','程隽','流年','猪猪侠']
        // 点击事件，当点击开始点名按钮后开始执行接下来的动作
        btn.onclick = function(){
            // 取反 flag为true的时候开始运行，定时器运行获取随机名，
            //flag为false的时候就清除定时器，并且按钮的文字变为开始点名
            flag = !flag;
            if(flag){
                // 定时器
                timer = setInterval(function(){
                    // 随机获取数组的下标, 向下取整
                    var index = Math.floor(Math.random()*(arr.length))
                    // 输出随机数
                    box.innerHTML = arr[index]
                    // 打印每一个随机数，方便检查有没有问题，可以注销
                    // console.log(box.innerHTML)
                },100)
                btn.innerHTML = '暂停'
                // 如果才开始就定义为true,然后再里面再取反，会出现一个bug
                // flag = !flag 
            }
            else{
                // 清除定时器
                clearInterval(timer);
                btn.innerHTML = '开始点名'
            }
        }
</script>

        看到这里可能会有人有疑问，为什么flag一开始不定义为true,如果一开始就定义为true的话，当点击开始点名按钮后，进入里面，然后开始if判断，第一遍肯定没问题，但就是你也只能点击一次，当你想点击第二次的时候就不能了，所以才把flag定义为false,这样就能循环多遍了。目前我还没有想到解决方法，欢迎有知道的朋友指导指导我！