JS+CSS随机点名详细介绍复制可用(可自己添加人名)
想必大家也想拥有一个可以随机点名的网页，接下来我为大家介绍一下随机点名，可用于抽人，哈哈
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 850px;
/* 我固定死了高度 如果需要修改黑色背景的高度请修改这部分 */
height: 1000px;
background-color: black;
margin: 0 auto;
position: relative;
}
.box>div {
width: 200px;
height: 75px;
font-size: 25px;
text-align: center;
border: 1px solid white;
background-color: orange;
color: white;
float: left;
line-height: 75px;
border-radius: 5px;
margin-left: 10px;
margin-bottom: 10px;
}
.boss {
width: 100%;
background-color: black;
position: relative;
}
.bth {
font-size: 50px;
width: 220px;
height: 120px;
background-color: orange;
position: absolute;
right: 10px;
bottom: 200px;
}
</style>
</head>
<body>
<!-- 大盒子 -->
<div class="boss">
<div class="box">
<!-- 可自己添加名字 -->
<!-- 现在是43个div 想加几个人就用多少个div-->
<!-- 记住不管是加还是减都要调整JS部分 已经在JS部分写好流程 -->
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
<div>name</div>
</div>
<input class="bth" type="button" value="点击点名">
</div>
</body>
<script>
//获取input点击
var bth = document.querySelector(".bth")
//获取所有box下面的div
var div = document.querySelectorAll(".box div")
//点击事件
bth.onclick = function () {
//点击后改按钮的value值
bth.value = "点名中"
// 点击后btn的背景颜色变成白色
bth.style.backgroundColor = "#fff"
var timer = setInterval(function () {
//循环所有要变色的盒子 因为我现在有43个div就i<43
// 有几个div就i<div.length
for (var i = 0; i < 43; i++) {
//定3个随机数，要放在循环里面
var a = Math.floor(Math.random() * 256)
var b = Math.floor(Math.random() * 256)
var c = Math.floor(Math.random() * 256)
// 这是变色
div[i].style.backgroundColor = "rgb" + "(" + a + "," + b + "," + c + ")"
// 给按钮添加disabled属性 因为我点击之后，在完成点名之前不能继续点击
bth.setAttribute("disabled", "disabled")
}
}, 100)
//点击后2秒执行延时器里的内容
setTimeout(function () {
//清除定时器
clearInterval(timer)
//循环div，2秒后所有的div的背景颜色变成orange
for (var j = 0; j < 43; j++) {
div[j].style.backgroundColor = "orange"
}
//挑选一个幸运儿 0 - 43的随机数 有多少人就Math.floor(Math.random() * (人数+1))
var d = Math.floor(Math.random() * 44)
// div变成红色 就是幸运儿了
div[d].style.backgroundColor = "red"
// 执行完毕按钮重新变为点击点名
bth.value = "点击点名"
// 按钮背景颜色重新变为orange
bth.style.backgroundColor = "orange"
// 2s后按钮可以重新点击
bth.removeAttribute("disabled")
}, 2000)
}
</script>
</html>
最终效果：
感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！
