<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>大轉(zhuǎn)盤</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()">結(jié)束</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>
