js随机点名

html部分代码

  <div class="btn">
            <button>开始选取幸运儿</button>
            <button>看看谁是幸运儿</button>
        </div>
        <div class="show">
            <p>幸运儿为：</p>
            <div class="end"></div>
        </div>
        <ul>
            <li>第1个同学</li>
            <li>第2个同学</li>
            <li>第3个同学</li>
            <li>第4个同学</li>
            <li>第5个同学</li>
            <li>第6个同学</li>
            <li>第7个同学</li>
            <li>第8个同学</li>
            <li>第9个同学</li>
            <li>第10个同学</li>
            <li>第11个同学</li>
            <li>第12个同学</li>
            <li>第13个同学</li>
            <li>第14个同学</li>
            <li>第15个同学</li>
            <li>第16个同学</li>
            <li>第17个同学</li>
            <li>第18个同学</li>
            <li>第19个同学</li>
            <li>第20个同学</li>
            <li>第21个同学</li>
            <li>第22个同学</li>
            <li>第23个同学</li>
            <li>第24个同学</li>
            <li>第25个同学</li>
            <li>第26个同学</li>
            <li>第27个同学</li>
            <li>第28个同学</li>
            <li>第29个同学</li>
            <li>第30个同学</li>
        </ul>

css部分代码

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .show{
            width: 200px;
            height: 280px;
            border: 8px solid aqua;

            position: fixed;
            
            display:  flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            top: 0;
            right: 10px;
        }
        .show p{
            text-align: center;
            height: 20px;
            line-height: 20px;
            color: red;
        }
        .show .end{
            width: 120px;
            height: 50px;
            border: 2px solid blue;

            text-align: center;
            line-height: 50px;
        }
        ul{
            list-style: none;

            width: 600px;
            margin: 50px auto;

            display: flex;
            flex-wrap: wrap;
        }
        ul>li{
            width: 15%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            white-space: nowrap;
            border: 2px solid black;

            margin: 10px 10px;
        }
        .btn{
            width: 800px;
            height: 50px;
            background-color: aqua;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        button{
            background-color: bisque;
            margin-left: 50px;
        }
        .active{
            background-color: aqua;
        }
    </style>

js部分代码

        <script>
            // 随机数 
            function random(start , end){
                return parseInt(Math.random()*(end - start)) + start
            }

            var li_arr = document.querySelectorAll('li')

            var btn1 = document.querySelectorAll('button')[0]
            var btn2 = document.querySelectorAll('button')[1]
            var end = document.querySelector('.end')
            // console.log(end)
            console.log(li_arr,btn1,btn2)
            var id1  = 0
            btn1.onclick = function(){
                btn1.disabled = true
                id1 = setInterval(function(){
                    // 先清所有li的active
                    for(var i = 0; i< li_arr.length; i++)
                    {
                        li_arr[i].classList.remove('active')

                    }
                    li_arr[random(0,30)].classList.add('active')
                    // 取出active属性的text
                    end.innerHTML = document.querySelector('li.active').innerText
                },120)
            }

            btn2.onclick = function(){
                btn1.disabled = false
                clearInterval(id1)
            }
        </script>