效果图如下
这时我们点击开始按钮后就会进行随机点名啦
里面主要用到的CSS和JavaScript代码如下
CSS部分
<style> * { margin: 0; padding: 0; } h2 { text-align: center; } .box { width: 600px; margin: 50px auto; display: flex; font-size: 25px; line-height: 40px; } .qs { width: 450px; height: 40px; color: red; } .btns { text-align: center; } .btns button { width: 120px; height: 35px; margin: 0 50px; } </style>
JavaScript部分
<body> <h2>随机点名</h2> <div class="box"> <span>名字是:</span> <div class="qs">这里显示姓名</div> </div> <div class="btns"> <button class="start">开始</button> <button class="end">结束</button> </div> <script> // 数据数组 const arr = ['马超', '黄忠', '赵云', '关羽', '张飞'] const qs = document.querySelector('.qs') // console.log(arr[random]); const start = document.querySelector('.start')//获取开始元素按钮 const end = document.querySelector('.end')//获取结束元素按钮 let random //开始按钮 start.addEventListener('click', function () {//鼠标点击开始执行 timeId = setInterval(function () { random = Math.floor(Math.random() * arr.length)//定义下标随机数 qs.innerHTML = arr[random]//随机选取 }, 35)//200毫秒/次 if (arr.length === 1) { start.disabled = true end.disabled = true } }) //关闭按钮 end.addEventListener('click', function () {//鼠标点击停止 clearInterval(timeId)//暂停循环 arr.splice(random, 1)//从数组中删除已经出现过的名字,避免重复 console.log(arr); }) </script> </body>