原生JS实现九宫格抽奖
2019-03-27 本文已影响0人
Gino_Li
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.luckyDraw{
width: 420px;
margin: 0 auto;
}
.prize{
font-size: 30px;
}
.lottery{
width: 240px;
margin: 30px auto;
position: relative;
}
.lottery li{
width: 80px;
height: 80px;
border: 1px solid #000;
box-sizing: border-box;
text-align: center;
line-height: 80px;
position: absolute;
}
.lottery li:nth-of-type(1){
left: 0;
top: 0;
}
.lottery li:nth-of-type(2){
left: 80px;
top: 0;
}
.lottery li:nth-of-type(3){
left: 160px;
top: 0;
}
.lottery li:nth-of-type(4){
left: 160px;
top: 80px;
}
.lottery li:nth-of-type(5){
left: 160px;
top: 160px;
}
.lottery li:nth-of-type(6){
left: 80px;
top: 160px;
}
.lottery li:nth-of-type(7){
left: 0;
top: 160px;
}
.lottery li:nth-of-type(8){
left: 0;
top: 80px;
}
.lottery li:nth-of-type(9){
left: 80px;
top: 80px;
cursor: pointer;
background: gold;
}
.active:after{
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
background: rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="luckyDraw">
<ul class="lottery">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>点击抽奖</li>
</ul>
<span class="prize">奖品</span>
</div>
<script>
var arr = [1,2,3,4,5,6,7,8];
var lottery = document.querySelector('.lottery');
var prize = document.querySelector('.prize');
var ali = lottery.querySelectorAll('li');
var i=0;//转到哪个位置
var count= 0;//转圈初始值
var totalCount = 9;//转动的总圈数
var speed =500;//转圈速度，越大越慢
var minSpeed =500;
var timer;
var isClick = true;
var index = 3;//指定转到哪个奖品
function roll(){
//速度衰减
speed -= 50;
if(speed<=10){
speed=10;
}
//每次调用都去掉全部active类名
for(var j=0;j<ali.length;j++){
ali[j].classList.remove('active');
}
i++;
//计算转圈次数
if(i>=ali.length-1){
i=0;
count++;
}
prize.innerHTML=arr[i];//旁边显示当前奖品
ali[i].classList.add('active');//添加变色类名
//满足转圈数和指定位置就停止
if(count>=totalCount&&(i+1)==index){
clearTimeout(timer);
isClick=true;
speed=minSpeed;
}else{
timer = setTimeout(roll,speed);//不满足条件时调用定时器
//最后一圈减速
if(count>=totalCount-1||speed<=50){
speed+=100;
}
}
}
ali[ali.length-1].onclick = function(){
if(isClick){
count= 0;
//随机产生中奖位置
// index = Math.floor(Math.random()*arr.length+1);
roll();
isClick=false;
}
}
</script>
</body>
</html>
