java 9宫格抽奖_原生JS实现九宫格抽奖

*{

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);

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 点击抽奖

奖品

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[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;

}

}