转盘抽奖效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
.wai{
width: 318px;
height: 318px;
margin:100px auto;
border: solid 1px black;
border-radius: 50%;
}
.wai>div{
width: 100px;
height: 100px;
background: rgb(254, 255, 192);
float: left;
line-height: 100px;
text-align: center;
border: solid;
}
.wai>div:nth-of-type(5){
background: blueviolet;
cursor: pointer;
}
#act{
background: blue;
}
</style>
</head>
<body>
<div class="wai">
<div class="nei" id="act">1</div>
<div class="nei">手机</div>
<div class="nei">平板</div>
<div class="nei">100元红包</div>
<div id="cj">点击抽奖</div>
<div class="nei">66红包</div>
<div class="nei">精美吊坠一个</div>
<div class="nei">钥匙扣</div>
<div class="nei">谢谢参与</div>
</div>
<script>
var arrDiv=document.getElementsByClassName("nei");
var oCj=document.getElementById("cj");
var num=0;
var shijian=Math.random()*4000+3500;
oCj.onclick=function(){
oTime=setInterval(dianji,200);
}
function dianji() {
num=num+1;
if (num>arrDiv.length-1){
num=0
}
for(j=0;j<arrDiv.length;j++){
arrDiv[j].id="";
}
arrDiv[num].id="act";
setTimeout(tingzhi,shijian);
function tingzhi() {
clearInterval(oTime)
}
}
</script>
</body>
</html>