利用js基础知识，js的内置数学对象Math.random()可实现一个粗糙的随机点名的功能
html&css骨架
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper{
padding: 10px;
margin: 100px auto;
width: 800px;
min-height: 600px;
background-color: pink;
}
h1{
text-align: center;
}
.top{
display: flex;
}
button{
width: 40px;
height: 30px;
margin-right: 10px;
}
.pitch{
flex: 1;
background-color: aqua;
}
ul{
display: flex;
flex-wrap: wrap;
list-style: none;
}
li{
margin: 10px;
width: 50px;
height: 30px;
background-color: coral;
text-align: center;
line-height: 30px;
}
.pitch{
display: flex;
padding: 0 10px;
line-height: 30px;
}
.pitch span{
margin-right: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>随机点名系统</h1>
<div class="top">
<button class="start">开始</button>
<button class="stop">暂停</button>
<div class="pitch">
<!-- <span>XX</span>
<span>XXX</span>
<span>XXXX</span> -->
</div>
</div>
<ul class="centent">
</ul>
</div>
js代码
<script>
/*1、根据数组生成li标签和名称
2 、点击设置事件，
1、开启定时器 ,随机选中li标签
2、修改选中li标签颜色
3、清除定时器，选中的值增加都内容栏
*/
let data=[ "万俟","司马","上官","欧阳","夏侯","诸葛","闻人","东方","赫连","皇甫","羊舌",
"尉迟","公羊","澹台","公冶","宗正","濮阳","淳于","单于","太叔","申屠","公孙","仲孙","轩辕","令狐",
"钟离","宇文","长孙","慕容","鲜于","闾丘","司徒","司空","兀官","司寇","南门","呼延","子车","颛孙",
"端木","巫马","公西","漆雕","车正","壤驷","公良","拓跋","夹谷","宰父","谷梁","段干","百里","东郭",
"微生","梁丘","左丘","东门","西门","南宫","第五","公仪","公乘","太史","仲长","叔孙","屈突","尔朱",
"东乡","相里","胡母","司城","张廖","雍门","毋丘","贺兰","綦毋","屋庐"
]
let ul=document.querySelector('ul')
let start=document.querySelector('.start')
let stop=document.querySelector('.stop')
let pitch=document.querySelector('.pitch')
let fn,num,j=0
// 遍历数组创建元素
for (let index = 0; index < data.length; index++) {
// 创建li标签
let li =document.createElement('li')
li.innerText=data[index]
ul.appendChild(li)
}
// 设置开始点击事件
start.addEventListener('click',function(){
// 节流
// start.disabled=true
clearInterval(fn)
// 开启定时器
fn=setInterval(function(){
num=random()
// 获取随机元素
let liList=document.querySelector(`li:nth-child(${num})`)
let li=document.querySelectorAll('li')
// 数组排他
for (let index = 0; index < data.length; index++) {
li[index].style.backgroundColor='coral'
}
// 重新设置属性
liList.style.backgroundColor='red'
j++
if(j==10){
let span =document.createElement('span')
span.innerText=data[num-1]
pitch.appendChild(span)
// 清除定时器
clearInterval(fn)
j=0
}
},100)
})
// 设置清除定时器事件
stop.addEventListener('click',function(){
let span =document.createElement('span')
// 清除定时器
clearInterval(fn)
span.innerText=data[num-1]
pitch.appendChild(span)
})
// 随机函数
function random(){
return Math.round( Math.random()*(data.length-1))
}
