原生JS實現(xiàn)九宮格抽獎效果
更新時間：2017年04月01日 09:31:37 作者：完美續(xù)航
本篇文章主要介紹了原生JS實現(xiàn)九宮格抽獎效果的示例代碼。具有很好的參考價值。下面跟著小編一起來看下吧
效果圖：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{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;}
</style>
</head>
<body>
<div id="container">
<ul id="ul1">
<li>一等獎</li>
<li>二等獎</li>
<li>三等獎</li>
<li>四等獎</li>
<a>開始</a>
<li>五等獎</li>
<li>六等獎</li>
<li>七等獎</li>
<li>八等獎</li>
</ul>
<p id="pp"></p>
</div>
<script>
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<num){
timer = setInterval(function(){
for(var j=0;j<li.length;j++){
li[j].className = '';
}
li[i%li.length].className = 'active';
i++;
if(i === num){
clearInterval(timer);
if(num%li.length === 0){
pp.innerHTML += "恭喜您中了：8 等獎" + '<br/>';
}else{
pp.innerHTML += "恭喜您中了："+ parseInt(num%li.length) + " 等獎"+ '<br/>';
}
}
},130);
}
}
aa.onclick = function(){
start();
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
Promise是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強大,下面這篇文章主要給大家介紹了關于ES6中promise詳解及用法的相關資料,需要的朋友可以參考下2022-11-11
在知道的key的情況下遍歷map自然就跟數(shù)組一樣的訪問羅，這里就不說了，示例如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
這篇文章主要為大家詳細介紹了js圖片查看器的制作方法，可以實現(xiàn)圖片的滑動等效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
我想在頁面里把想要的關鍵詞加亮凸出(用顏色區(qū)分出來)顯示,這樣讓客戶一眼能看到重的東西,然后在加亮的關鍵詞上可以加上超連接.請問高手們怎么實現(xiàn)宋的功能.就像搜索引擎的那種..搜索關鍵詞的時候就顯示紅色的.2008-06-06
這篇文章主要介紹了promise封裝wx.request的方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-05-05
這篇文章主要介紹了JS樣式獲取的封裝方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章給大家總結(jié)了關于JS動畫中定時器的相關用法以及相關知識點總結(jié)，有需要的朋友可以參考學習下。2018-03-03
Javascript中暫停功能的實現(xiàn)代碼...2007-03-03
一文詳解如何在uniapp中優(yōu)雅地使用WebView
最近工作中遇到webview,對于我這個剛接觸前端的小白來說真的不懂啥意思,下面這篇文章主要給大家介紹了關于如何在uniapp中優(yōu)雅地使用WebView的相關資料,需要的朋友可以參考下2023-01-01
獲得時間差,時間格式為 年-月-日 小時:分鐘:秒 或者 年/月/日 小時：分鐘：秒2011-07-07