原生js实现点名册效果但是我这么写没有一点灵活性，希望大佬能够多多指教。

话不多说，先上图（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><span class="current">小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></li>
            <li><span>小明</span></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）——内置对象

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