原生js实现随机点名
代码如下
点击查看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>随机点名</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body,#position{
width: 100%;
height: 100%;
}
.boxx{
width: 80%;
height: 95%;
border: solid 1px black;
margin: auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: column;
font-size: 24px;
}
.boxxx{
width: 100%;
height: 80%;
}
.boxs{
margin: auto;
}
#box{
width: 100%;
height: 100%;
display: flex;
justify-content: space-evenly;
align-items: flex-start;
flex-wrap: wrap;
border-bottom: 1px solid black;
}
#box li{
list-style-type: none;
display: block;
padding: 5px 0 5px 0;
width: 18%;
border: 1px black solid;
text-align: center;
}
.dsds{
width: 100%;
height: 20%;
background-color: blanchedalmond;
/* text-align: center; */
display: flex;
justify-content: space-around;
align-items: center;
}
.dsds1,.dsds2,.dsds3{
width: 32%;
height: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.dsds1{
background-color: aqua;
font-size: 50px;
}
.dsds2{
background-color: lawngreen;
}
.dsds2 button{
display: inline-block;
width: 50%;
height: 100%;
font-size: 40px;
font-weight: 600;
letter-spacing :20px;
}
.dsds3{
background-color: hotpink;
font-weight: 600;
font-size: 50px;
}
</style>
</head>
<body>
<div id="position" >
<div class="boxx">
<div class="boxxx">
<ul id="box">
</ul>
</div>
<div class="dsds">
<div class="dsds1">
恭喜
</div>
<div class="dsds2">
<button class="button1" onclick="nidd()">开始</button>
<button class="button2">暂停</button>
</div>
<div class="dsds3">
发财
</div>
</div>
</div>
</div>
</body>
<script>
// var x =document.getElementById('position')
//获取容器
var y=document.getElementById('box')
//获取按钮
var starts=document.querySelector('.button1')
var stops=document.querySelector('.button2')
//获取选中文字填充区域
var showw1=document.querySelector('.dsds1')
var showw3=document.querySelector('.dsds3')
//要显示的姓名数组
var ddd=["你好","ddd","ggg","hhh","jjj","ggg","hhh","jjj","ggg","hhh","jjj","ggg","hhh","jjj","jjj","ggg","hhh","jjj","ggg","hhh","jjj"]
//加载需显示的姓名
y.innerHTML=ddd.map((item,index)=>`<li id="box${index}">${item}</li>`).join('')
//防止按钮重复点击
var switchss = true
//随机选择姓名函数
function nidd(){
let i = ddd.length
let dddsss= Math.floor(Math.random()*i)
for(let ds=0;ds<i;ds++){
y.children[ds].setAttribute("style",`background-color:none`)
}
y.children[dddsss].setAttribute("style",`background-color:${getRandomColors("rgba",.4)}`)
showw1.innerHTML=y.children[dddsss].innerHTML
showw3.innerHTML=y.children[dddsss].innerHTML
}
//开始按钮
starts.addEventListener('click',()=>{
if(switchss){
this.int=setInterval('nidd()',100)
console.log(this.int)
switchss=false
}
})
//结束按钮
stops.addEventListener('click',()=>{
clearInterval(this.int)
switchss=true
})
//工具函数
//获取随机颜色，
//一个参数为 3(3位十六进制颜色表示)或者6(6位十六进制颜色表示)或者rgba的颜色表示
//第二个参数为使用rgba颜色的透明度
function getRandomColors(val, transparency = 1) {
let result = [];
let digits
let rgbas
switch (val) {
case 3:
digits = val
break;
case 6:
digits = val
break;
case 'rgba':
rgbas = 1
break;
default:
alert('第一个参数为3/4，第二个参数为透明度')
return
}
if (rgbas === 1) {
for (let i = 0; i < 3; i++) {
result.push(Math.floor(Math.random() * 255));//获取0-255之间的随机数
}
let colorss = `rgba(${result.toString()},${transparency})`
return colorss
} else {
for (let i = 0; i < digits; i++) {
result.push(Math.floor(Math.random() * 16).toString(16).toUpperCase());//获取0-15并通过toString转16进制通过toUpperCase()字母转大写
}
let colorss = '#' + result.join('')
return colorss
}
}
</script>
</html>