简易点名系统

思路:

        通过计时器实现名字的播放，索引联合随机数共同构成显示随机名字

        给与一个状态变量控制一个按钮的两种功能

css部分

<style>
        #big {
            width: 240px;
            padding: 180px;
        }

        div {
            width: 240px;
            /* height: 180px; */
            padding: 20px 0;
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            color: red;
        }

        button {
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>

js部分

<script>
        var str =
            '赵立伟,宋宁,王泽堂,陈世跑,屈庆伸,陈刚,张涛,杨兴文,陈峰,左成发,高攀伟,杨凯峰,里祥瑞,吴家保,申浩,严思霞,杨晓辉,王松,周文利,孙光,董帅,刘猛,张毅,王超一,尹升建,林素溢,李旭,李梦雪,陶文君,高兴悦,邹丹丹,王绍康,王安智,卜祥赫,刘战阳,胡腾,孙引,余迎,王亚民,赵越,余瑶,王苏,李恩赐,黎瑞华,陶金叶,罗水平,蒲旺,张高飞,张磊,宋腾南,张帅杰,蒙丽娜,熊文豪,王惟安,孙学科,徐亚翔,邰振辉,宋瑞准,孙存浩,郑泽洋,刘炳芳,陈乾,蔡智泉,徐康,李锋,吴振涛,李延送';
        var arr = str.split(",");
        var change = document.getElementById("change");
        var btn = document.getElementById("btn");
        var times = "";
        var onOff = true;

        btn.onclick = function () {
            //判断当前状态，如果开关为真，则执行播放操作调用定时器
            if (onOff) {
                times = setInterval(function () {
                    var name = arr[Math.round(Math.random() * (arr.length - 1))]
                    // console.log(name);
                    change.innerHTML = name;
                }, 40)

                btn.innerHTML = "暂停🤪";
                onOff = false;
            //如果开关为假，清除定时器，暂停
            } else {
                clearInterval(times);
                btn.innerHTML = "开始🤪";
                onOff = true;
            }
        }
    </script>

难点:定时器的引用需要储存一个变量才能给予清除。

简单的索引并不能实现名字的随机显示，需要套用随机数

状态变量的赋值，决定了一个按钮是否能兼并开始和暂停功能