利用JavaScript实现简单的点名表

最新推荐文章于 2023-01-14 16:59:29 发布

海阔天空ZMZ

最新推荐文章于 2023-01-14 16:59:29 发布

阅读量741

点赞数

分类专栏： JavaScript 文章标签： JavaScript 点名表

本文链接：https://blog.youkuaiyun.com/weixin_45457515/article/details/99762661

版权

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

如图，当点击开始start按钮时开始随机显示，当点击stop按钮时结束
在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>点名表</h1>
    <button>start</button><button>stop</button>
    <script>
        var h = document.querySelector('h1');
        var btn = document.querySelectorAll('button')
        var names = ['同学1','同学2','同学3','同学4','同学5','同学6','同学7','同学8','同学9']
        // names[i]
        var times;
        btn[0].onclick = function(){
            clearInterval(times)
            times = setInterval(function(){
                var i = Math.floor(Math.random()*names.length)
                h.innerHTML =  names[i]
            },1)
          
        }
        btn[1].onclick = function(){
            clearInterval(times)
        }
    </script>
</body>
</html>