js基础之点名册

最新推荐文章于 2022-10-22 15:37:24 发布

頑張ってちしじょ

最新推荐文章于 2022-10-22 15:37:24 发布

阅读量432

点赞数 1

本文链接：https://blog.csdn.net/weixin_45170547/article/details/90743574

版权

点名册
点名册的逻辑其实和抽奖的逻辑一样，整体的思路为对于要进行滚动的名字把它们放入数组中，具体操作如下

<body>
    <div id="box">
        <button id="bg">开始</button>
        <button id="end">结束</button>
        <div id="name"></div>
    </div>
</body>
<script>
    window.onload = function () {
        //1.获取标签
        var bg =document.getElementById("bg");
        var end = document.getElementById("end");
        var name = document.getElementById("name");
        var timer = null;
        //2.定义变量
        var nameArr = ["蔡徐坤","范丞丞","陈立农","justin","朱正廷","王子异","小鬼","林彦俊","尤长靖",];
        name.innerText = nameArr[0];
        //3.监听事件
        bg.onclick = function (){
            //3.1清楚定时器
            clearInterval(timer);
            //3.2设置定时器
            timer = setInterval(function(){
                //3.3随机数
                var index = parseInt(Math.random() * nameArr.length);    //random() 取0-1之间得到随机数
                var index = nameArr[index];
                name.innerText = index;
            }, 40);
        }
        end.onclick = function (){
            clearInterval(timer);
        }
    }
</script>

注意