效果圖：

代碼如下：

*{margin:0;padding:0;}

#container{width:310px;height:310px;margin:30px auto;}

#ul1{width:310px;height:310px;list-style:none;}

#ul1 li,#ul1 a{width:100px;height:100px;border:1px solid #565656;float:left;text-align:center;line-height:100px;}

#ul1 a:hover{cursor:pointer;color:orange;font-size:18px;}

#ul1 .active{background:red;color:#fff;}

#pp{line-height:32px;color:#9a9a9a;text-align:center;}

• 一等獎
• 二等獎
• 三等獎
• 四等獎

開始

五等獎六等獎七等獎八等獎

var container = document.getElementById('container'),

li = container.getElementsByTagName('li'),

aa = container.getElementsByTagName('a')[0],

pp = document.getElementById('pp'),

timer = null;

function start(){

var i = 0;

var num = Math.floor(Math.random() * li.length) + 20;

if(i

timer = setInterval(function(){

for(var j=0;j

li[j].className = '';

}

li[i%li.length].className = 'active';

i++;

if(i === num){

clearInterval(timer);

if(num%li.length === 0){

pp.innerHTML += "恭喜您中了：8 等獎" + '
';

}else{

pp.innerHTML += "恭喜您中了："+ parseInt(num%li.length) + " 等獎"+ '
';

}

}

},130);

}

}

aa.onclick = function(){

start();

}

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持！

總結

以上是生活随笔為你收集整理的html九宫格抽奖视频,原生JS实现九宫格抽奖效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。