javascript跑馬燈抽獎(jiǎng)實(shí)例講解
更新時(shí)間：2020年04月17日 16:04:05 作者：和之韻律
這篇文章主要為大家介紹了javascript跑馬燈抽獎(jiǎng)特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例講解了javascript跑馬燈抽獎(jiǎng)特效，特別適合用于抽獎(jiǎng)活動(dòng)，分享給大家供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽獎(jiǎng)游戲</title>
<style>
#box{
width:720px;
margin:0 auto;
margin-top:20px;
box-shadow:0px 0px 2px #333;
}
.pic{
width:200px;
height:200px;
float:left;
line-height:200px;
margin:10px;
border:5px #fff solid;
color:blue;
font-size: 35px;
text-align: center;
}
.anniu{
width:200px;
height:200px;
float:left;
margin:10px;
}
#drawBtn{
color:red;
font-size:30px;
width:200px;
height:200px;
box-shadow:0px 0px 2px #333;
font-weight: bold;
}
</style>
<script>
window.onload=init;
var setting={
count:0,
total:24,
delay:20,
picIndex:[0,1,2,4,7,6,5,3]
}
function init(){
document.getElementById("drawBtn").onclick=function(){
setting.count=0;
setting.delay=20;
this.disable=true;//禁用按鈕
var drawBtn=this;
//獲取所有圖片的div
var allDivs=document.getElementsByClassName("pic");
//獲得一個(gè)隨機(jī)整數(shù)，代表中獎(jiǎng)的那個(gè)位置，3*8+(0-7)
setting.total+=Math.floor(Math.random()*allDivs.length);
//設(shè)置定時(shí)器，依次修改每個(gè)div邊框的顏色.
setTimeout(function show(){
//重置上一個(gè)邊框的顏色
for (var i=0;i<allDivs.length;i++){
allDivs[i].style.borderColor="#fff";
allDivs[i].style.opacity=0.7;
}
//找到要修改的那個(gè)邊框的顏色設(shè)置
var currentPic=allDivs[setting.picIndex[setting.count%8]];
currentPic.style.borderColor="red";
currentPic.style.opacity=1.0;
setting.count++;
setting.delay+=2*setting.count;
if(setting.count>setting.total){
alert("您中獎(jiǎng)了，哈哈");
drawBtn.disable=false;
return;
}
setTimeout(show,setting.delay);
},setting.delay);
}
}
</script>
</head>
<body>
<div id="box">
<div class="pic">1</div>
<div class="pic">2</div>
<div class="pic">3</div>
<div class="pic">4</div>
<div class="anniu"><input type="button" value="我要抽獎(jiǎng)" id="drawBtn"/></div>
<div class="pic">5</div>
<div class="pic">6</div>
<div class="pic">7</div>
<div class="pic">8</div>
</div>
</body>
</html>
想要學(xué)習(xí)更多關(guān)于抽獎(jiǎng)功能的實(shí)現(xiàn)，請(qǐng)參考此專題：抽獎(jiǎng)功能
以上就是本文的詳細(xì)內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
代碼觸發(fā)js事件(click、change)示例應(yīng)用
Chrome , Firfox 不支持fireEvent的方法可以使用dispatchEvent的方法替代，直接給一個(gè)兼容的Code，下面有個(gè)不錯(cuò)的示例，喜歡的朋友可以收藏下2013-12-12
javascript Three.js創(chuàng)建文字初體驗(yàn)
這篇文章主要為大家介紹了Three.js創(chuàng)建文字初體驗(yàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
這篇文章主要為大家詳細(xì)介紹了js調(diào)用刷新界面的幾種方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
javaScript實(shí)現(xiàn)滾動(dòng)新聞的方法
這篇文章主要介紹了javaScript實(shí)現(xiàn)滾動(dòng)新聞的方法,涉及javascript實(shí)現(xiàn)頁(yè)面滾動(dòng)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
TypeScript 安裝使用及基本數(shù)據(jù)類型
這篇文章主要介紹了TypeScript 安裝使用及基本數(shù)據(jù)類型,本文分步驟給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
Bootstrap實(shí)現(xiàn)漸變頂部固定自適應(yīng)導(dǎo)航欄
這篇文章給大家介紹了Bootstrap實(shí)現(xiàn)漸變頂部固定自適應(yīng)導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
基于JS制作一個(gè)網(wǎng)頁(yè)版的猜數(shù)字小游戲
這篇文章主要為大家詳細(xì)介紹了如何利用HTML+CSS+JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)版的猜數(shù)字小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript中報(bào)錯(cuò)Cannot?set?properties?of?undefined?(settin
這篇文章主要介紹了JavaScript中報(bào)錯(cuò)Cannot?set?properties?of?undefined?(setting?'1')的解決方案,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或使用js具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2025-03-03
淺析Javascript中bind()方法的使用與實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇淺析Javascript中bind()方法的使用與實(shí)現(xiàn)。小編覺(jué)得挺2016-05-05
下面小編就為大家分享一篇基于百度地圖api清除指定覆蓋物(Overlay)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01