style部分
<style>
.disbtn {
opacity: 0.6;
pointer-events: none;
}
.box{
height: 20px;
margin: 10px 0;
}
</style>
body部分、
<!-- 选人 -->
<div class="box">
<span class="person"></span>
<span class="person"></span>
<span class="person"></span>
</div>
<div>
<button onclick="randomperson()" id="btn">随机选人</button>
</div>
js部分
// 随机选人
let persons = document.querySelectorAll(".person");
let btn = document.getElementById("btn");
function randomperson() {
console.log(btn);
btn.className = "disbtn";
var personArr = [
"刘",
"张",
"王",
"宋",
"李",
"向",
"曹",
"吴",
"郭",
"唐",
"田",
"陈",
];
var seped = 1;
var poersonNum = 0;
var randomNo;
var newpersonArr = personArr;
for (let index = 0; index < persons.length; index++) {
persons[index].innerHTML = "";
let timer = setInterval(() => {
seped++;
randomNo = Math.round(Math.random() * (newpersonArr.length - 1)); //选择随机人员
if ( poersonNum < persons.length && poersonNum == index) { //从第一个随机滚动开始
persons[index].innerHTML = newpersonArr[randomNo];
}
if (seped == 200 * (poersonNum + 1) && poersonNum < persons.length) { //依次添加人员
persons[poersonNum].innerHTML = newpersonArr[randomNo];
let local = newpersonArr.indexOf(newpersonArr[randomNo]); // 删除已选中得人员
newpersonArr.splice(local, 1);
poersonNum++;
}
if (poersonNum >= persons.length) {
clearInterval(timer);
poersonNum++;
btn.className = "";
}
}, 50);
}
}
简易html+css+js随机选人小案例参考,欢迎各位大佬给出代码优化建议
代码效果
1703482239719