原生js实现点名册效果

痛定思痛。 2022-10-01 05:42 210阅读 0赞

话不多说，先上图（GIF那个软件我没有成功下载下来，桑心）：

<!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>
 <style>
 *{
 margin: 0;
 padding:0;
 }
 .title{
 text-align: center;
 margin: 50px 0 30px 0;
 }
 .box{
 width: 700px;
 margin: 0 auto;
 border: 1px solid #ccc;
 padding: 10px;
 }
 ul{
 list-style-type: none;
 width: 700px;
 height: 320px;
 }
 li{
 float: left;
 width: 100px;
 height: 80px;
 line-height: 80px;
 text-align: center;
 }
 span{
 width: 60px;
 height: 60px;
 padding: 10px 20px;
 border: 1px solid pink;
 }
 .btn{
 width: 90px;
 height: 40px;
 background:lightseagreen;
 color:#fff;
 outline: none;
 border-radius: 10px;
 box-shadow: 2px 2px 2px grey;
 position: absolute;
 top: 500px;
 }
 #btn{ 
 margin-left: 600px; 
 }
 #end{ 
 margin-left: 770px; 
 }
 .current{
 background: #c95c54;
 color: #fff;
 border: 1px solid #c95c54;
 }
 </style>
 </head>
 <body>
 <h3 class="title">讲台</h3>
 <div class="box">
 <ul>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 <li>小明</li>
 </ul>
 </div>
 <input type="button" value="点名" id="btn" class="btn">
 <input type="button" value="结束" id="end" class="btn">
 <script>
 var list=document.getElementsByTagName('span');
 var timer=null;
 document.getElementById('btn').onclick=function(){
 
 clearInterval(timer);
 timer=setInterval(()=>{
 for(var i=0;i<list.length;i++){
 list[i].className="";
 }
 var num=parseInt(Math.random()*21);
 list[num].className="current";
 },50) 
 }
 
 document.getElementById('end').onclick=function(){
 clearInterval(timer);
 }
 </script>
 </body>
 </html>
 复制代码

主要用了\*\*Math.random()\*\*随机数，不清楚的请戳：[js学习中的三种对象（1）——内置对象][js_1]

但是我这么写没有一点灵活性，希望大佬能够多多指教。

转载于:https://juejin.im/post/5cda81b4e51d453b4558d869

[js_1]: https://juejin.im/post/5ccfa8426fb9a032060c3ac9