简单随机点名器

时间：2024-03-04 16:52:09
<!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>

相关文章