今天我们来做一个比较简单的JS点名效果，先把HTML和css给准备好，然后我们开始写JS结构
HTML
<h2>随机点名</h2> <div class="box"> <span>名字是：</span> <div class="qs">这里显示姓名</div> </div> <div class="btns"> <button class="start">开始</button> <button class="end">结束</button> </div>
CSS
* { 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; }
JS结构首先分析点名事件三个事情，第一个是事件源，第二个点击事件的程序
第三个就是事件的结果
首先我们需要定义一个数组
比如我这里定义五个数组
const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
然后第一步我们开始模块按钮
首先我们需要获取两个按钮，一个开始，一个结束
const qs=document.querySelector('.qs') const start=document.querySelector('.start')
然后我们获取开始按钮对象
addEventListene是监听事件的按钮，然后后面的click是事件，就是点击这个按钮就会执行下面的随机数的方法
这里我们在这里写一个timeid是指这个事件的按钮，所以我们要在首页去定义二个变量
let random=0 let timerId=0
start.addEventListener('click',function(){ timerId=setInterval(function(){ random=parseInt(Math.random()*arr.length) qs.innerHTML=arr[random] }, 35)
第二步就是关闭按钮，我们筛选完之后需要关闭然后删除抽取的元素
const end=document.querySelector('.end') end.addEventListener('click',function(){ clearInterval(timerId) //结束了，删掉当前抽取的元素 arr.splice(random,1) console.log(arr)
arr.splice(random,1)：意思就是这个事件结束了删掉这个随机数的一个元素
clearInterva：关闭定时器的意思，因为我们做一个点名事件是需要通过定时器来完成，这里的意思是停止的意思
最后我们在加一个步骤
if(arr.length===1){ start.disabled=end.disabled=true }
这里的意思是这个素组如果只剩下一个元素，那么就会禁用开始和停止这两个按钮，如果换是flase就可以继续使用
接下来是源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <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> </head> <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> // 数据数组 let random=0 let timerId=0 const arr = ['马超', '黄忠', '赵云', '关羽', '张飞'] //业务1开始模块按钮 const qs=document.querySelector('.qs') const start=document.querySelector('.start') //1.1获取开始按钮对象 start.addEventListener('click',function(){ //1.获取随机数 timerId=setInterval(function(){ random=parseInt(Math.random()*arr.length) qs.innerHTML=arr[random] }, 35) if(arr.length===1){ start.disabled=end.disabled=true } }) //2.关闭按钮 const end=document.querySelector('.end') end.addEventListener('click',function(){ clearInterval(timerId) //结束了，删掉当前抽取的元素 arr.splice(random,1) console.log(arr) }) </script> </body> </html>
