<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大转盘</title>
</head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
display: block;
width: 600px;
height: 600px;
margin: 100px auto;
display: flex;
flex-wrap: wrap;
justify-content: start;
}
ul>li{
width: 200px;
height: 200px;
background-color: lightblue;
color: #fff;
font-size: 24px;
display: flex;
justify-content: space-around;
align-items: center;
border: 1px solid #fff;
box-sizing: border-box;
}
ul>li.active{
background-color: orangered;
}
button{
border: none;
position: relative;
padding: 10px 18px;
cursor: pointer;
outline: none;
}
button::after{
content: '';
width: 0;
height: 1px;
position: absolute;
background-color: rgb(53, 178, 228);
left: 0;
transition: all .3s linear;
top: 0 ;
}
button::before{
content: '';
width: 0;
height: 1px;
position: absolute;
background-color: rgb(50, 192, 248);
right: 0;
transition: all .3s linear;
bottom: 0 ;
}
button:hover:after,button:hover:before{
width: 100%;
}
li:nth-child(5){
border-radius: 50%;
}
</style>
<body>
<ul>
<li class="active">100</li>
<li>200 </li>
<li>300</li>
<li>400</li>
<li>
<button class="star" onclick="stars()">开始</button>
<button class="end" onclick="over()">结束</button>
</li>
<li>500</li>
<li>600</li>
<li>700</li>
<li>800</li>
</ul>
<script>
let li=document.querySelectorAll('li');
let star=document.querySelector('.star'),end=document.querySelector('.end');
let arr=[0,1,2,5,8,7,6,3];
let timer,num=0;
function auto(){
for(let i=0;i<li.length;i++){
li[i].classList.remove('active')
}
li[arr[num]].classList.add('active');
num++;
if(num>=arr.length){
num=0;
}
}
function stars(){
timer= setInterval(auto,20)
star.setAttribute('disabled',true)
}
function over(){
clearInterval(timer)
star.removeAttribute('disabled')
}
</script>
</body>
</html>
网友评论