被公司点名?迟到啦?
高大上抽奖?
请看下面:
效果图
代码来了:
html5
<div class="bigBox">
<ul class="box">
<!-- 根据人数渲染 <li> </li> -->
</ul>
<!-- 设置开始 停止 中奖者 -->
<div class="btn">
<button class="start">开始</button>
<button class="stop">停止</button>
<div class="choose">
<p class="ni">恭喜你中将了!!!</p>
<span class="name"></span>
</div>
</div >
</div>
css部分
<style>
ul>li{list-style:none;}
.bigBox{
width: 1000px;
height: 500px;
margin: 20px auto ;
position: relative;
}
.bigBox>ul{
width: 100%;
height: 500px;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
border-bottom: 1px solid black;
padding: 12px;
box-sizing: border-box;
}
/* 设置人员所在元素样式 */
.bigBox>ul>li{
width: 80px;
height: 40px;
border-radius: 15px;
border: 1px solid orange;
background-color: white;
font-size: 20px;
text-align: center;
line-height: 40px;
}
/* 为了实现炫一点儿的效果 */
.bigBox>ul>li.active{
background-color: red;
font-weight: bolder;
}
.btn{
width: 250px;
height: 200px;
margin: 10px auto;
border: 1px solid burlywood;
background-color: pink;
}
button{
width: 100px;
border-radius: 15px;
cursor: pointer;
margin-top: 10px;
margin-left: 70px;
font-size: 20px;
}
.choose{
width: 248px;
height: 90px;
border-top: 1px solid burlywood;
text-align: center;
margin-top: 10px;
position: relative;
}
.ni{
font-size: 25px;
margin-top: 10px;
margin-bottom: 5px;
}
/* 这里是中奖者呦 */
.name{
font-size: 40px;
color: red;
font-weight: bolder;
width: 200px;
height: 50px;
position: absolute;
left: 25px;
}
</style>
js部分:
<script>
// 获取元素
let box=document.querySelector('.box')
let start=document.querySelector('.start')
let stop=document.querySelector('.stop')
let li=document.getElementsByTagName('li')
// 这里是参与者
let arr=[
'a','b','c','d','e','f','g','我','你','他'
]
// 将数组插入li里
let str=''
for (let i=0;i<arr.length;i++) {
str+="<li>" + arr[i] + "</li>";
}
// 放到box里
box.innerHTML=str;
//开始喽
let timer=null
// 点击事件
start.onclick=function(){
// 简单封装一个随机数,为了找中奖者
function randomNum(min, max) {
var a = Math.min(min, max)
var b = Math.max(min, max)
var res = Math.floor(Math.random() * (b - a + 1)) + a
return res
}
// 封装一个随机颜色,为了实现炫酷效果
function randomColor() {
var color = '#'
for (var i = 0; i < 6; i++) {
color += randomNum(0, 15).toString(16)
}
return color
}
// 每次点击前 清除定时器
clearInterval(timer)
timer=setInterval(function(){
// 循环
let i=Math.floor(Math.random()*arr.length)
for(let j=0;j<li.length;j++){
li[j].className=""
}
li[i].className="active"
// 边框变色
box.style.border= `20px solid ${randomColor()}`
},0.00001)
}
//停止
stop.onclick=function(){
clearInterval(timer)
// 找到那个幸运者
let you=document.querySelector('.active')
let name=you.innerText
let lucky=document.querySelector('.name')
lucky.innerText=name
}
</script>