简单随机点名器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0}
        .container{width:400px;height:120px;border:1px solid deepskyblue;color:#333;font-size:30px;line-height:120px;text-align:center;margin:0 auto;}
        span{display:block;width:100px;height:30px;font-size:20px;line-height:30px;text-align:center;background:deepskyblue;margin:40px auto;cursor:pointer}
    </style>
</head>
<body>
<div class="container">are you ready</div>
<span>开始点名</span>
</body>
</html>
<script>
    let student = ['张无忌','文件','路径','回调','函数','参数','没有','接下来','我们','创建','js文件','代码','如下','所示','新增','修改','删除','成功','失败','准备','你好呀','raadyGo','德玛西亚','诺克萨斯','艾欧尼亚','祖安','裁决','圣殿','哈撒给','嘀嘀嘀','呼呼呼'];
    let span = document.getElementsByTagName("span")[0];
    let container = document.getElementsByClassName("container")[0];
    let index = 0;
    let length = student.length;
    let myTimer = null; // 定义一个null对象，用来承载定时器
    span.onclick = function () {
        let btnText = this.innerHTML;
        if (btnText === '开始点名') {
            randomStudent();
            this.innerHTML = '停止点名';
        } else {
            clearInterval(myTimer);
            this.innerHTML = '开始点名';
        }
    };
    function randomStudent() {
        myTimer = setInterval(function () {
            index = parseInt(Math.random()*length); // 定时器每隔30ms便取一个0-31之间的随机下标，取不到31
            container.innerHTML = student[index]; // 然后赋值
        },30)
    }
</script>
posted @ 2019-12-03 11:15  欢先森o  阅读(246)  评论(0)    收藏  举报