您好,登錄后才能下訂單哦!
這篇文章主要介紹了如何實(shí)現(xiàn)Jquery轉(zhuǎn)盤抽獎(jiǎng)程序,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
基于Jquery的Javascript轉(zhuǎn)盤抽獎(jiǎng)程序,可以自定義抽獎(jiǎng)界面,獎(jiǎng)品數(shù)量、圖片等,可控制中獎(jiǎng)的獎(jiǎng)品,抽獎(jiǎng)轉(zhuǎn)盤轉(zhuǎn)動(dòng)的速度和圈數(shù)。
在實(shí)際使用中,應(yīng)當(dāng)把概率放到后臺(tái)程序中運(yùn)算,以保證安全性和產(chǎn)生中獎(jiǎng)獎(jiǎng)品的可控性
Javascript代碼:
<script type="text/javascript"> var index = 1, //當(dāng)前亮區(qū)位置 prevIndex = 14, //前一位置 Speed = 300, //初始速度 Time, //計(jì)時(shí)器 arr_length = 14, //獎(jiǎng)池獎(jiǎng)品數(shù)量 EndIndex = 1, //決定在哪一格變慢 cycle = 0, //計(jì)算圈數(shù) EndCycle = 3, //轉(zhuǎn)動(dòng)多少圈后停下 flag = false, //結(jié)束轉(zhuǎn)動(dòng)標(biāo)志 random_num = 1, //中獎(jiǎng)的格子 quick = 0; //多少格后開(kāi)始加速 function StartGame(){ $("#random_box li").removeClass("random_current"); //產(chǎn)出隨機(jī)中獎(jiǎng)數(shù)1--14之間 //在實(shí)際應(yīng)用中,中獎(jiǎng)數(shù)應(yīng)通過(guò)Ajax從后臺(tái)獲得,以確保中獎(jiǎng)概率的可控性 random_num = Math.floor(Math.random() * 14 + 1); //從第一格開(kāi)始轉(zhuǎn)動(dòng) index = 1; //圈數(shù)計(jì)數(shù)器置0 cycle = 0; flag = false; //中獎(jiǎng)格子前5格開(kāi)始變慢 if(random_num > 10) { EndIndex = random_num - 10; } else { EndIndex = random_num + arr_length - 10; } Time = setInterval(Star,Speed); } function Star(num){ //跑馬燈變速 if(flag == false){ //走五格開(kāi)始加速 if(quick == 5){ clearInterval(Time); Speed=50; Time=setInterval(Star,Speed); } //跑指定圈數(shù)后開(kāi)始減速 if(cycle == EndCycle + 1 && index - 1 == EndIndex){ clearInterval(Time); Speed = 300; //觸發(fā)結(jié)束 flag = true; Time = setInterval(Star,Speed); } } if(index > arr_length){ index = 1; cycle ++; } //結(jié)束轉(zhuǎn)動(dòng)并選中號(hào)碼 if(flag == true && index==parseInt(random_num)){ quick = 0; clearInterval(Time); } //設(shè)置當(dāng)前選中樣式 $("#random_"+index).addClass('random_current'); if(index > 1) prevIndex = index - 1; else{ prevIndex = arr_length; } //取消上次選擇樣式 $("#random_"+prevIndex).removeClass('random_current'); index ++; quick ++; } </script>
HTML代碼:
<div class="box"> <div class="inbox"> <ul id="random_box"> <li id="random_1"><img src="images/img01.gif"></li> <li id="random_2"><img src="images/img02.gif"></li> <li id="random_3"><img src="images/ts.gif"></li> <li id="random_4"><img src="images/img03.gif"></li> <li id="random_5"><img src="images/img04.gif"></li> <li id="random_6"><img src="images/ts.gif"></li> <li id="random_7"><img src="images/img05.gif"></li> <li id="random_8"><img src="images/img06.gif"></li> <li id="random_9"><img src="images/img07.gif"></li> <li id="random_10"><img src="images/ts.gif"></li> <li id="random_11"><img src="images/img01.gif"></li> <li id="random_12"><img src="images/img02.gif"></li> <li id="random_13"><img src="images/ts.gif"></li> <li id="random_14"><img src="images/img04.gif"></li> </ul> <b class="ok" onclick="StartGame()">我要抽獎(jiǎng)</b> </div> </div>
CSS代碼:
/* CSS Document Power by www.jb51.net */ body,p,ul,ol,li,img,div{margin:0;padding:0;border:0;} ul,li{list-style:none;} body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center; margin:0 auto;} .box{ padding:9px 0 0 11px; width:759px; height:611px; background:#ccc; margin:20px auto; } .inbox{ width:751px; height:596px;position:relative;} #random_box li{ position:absolute; width:144px; overflow:hidden; height:144px; border:1px solid #c7c5ca; background:#fff;} #random_box li img{ width:144px; display:block; height:144px;} .ok{ display:block; width:442px; height:294px; background:#c00; color:#fff; font-size:48px; position:absolute; top:149px; left:148px; cursor:pointer; text-align:center; line-height:280px;} #random_1{ left:0; top:0;} #random_2{ left:148px;top:0;} #random_3{ left:296px;top:0;} #random_4{ left:444px;top:0;} #random_5{ left:592px;top:0; } #random_6{ left:592px;top:148px;} #random_7{ left:592px; top:298px;} #random_8{ left:592px; top:446px;} #random_9{ left:444px; top:446px;} #random_10{ left:296px; top:446px;} #random_11{ left:148px; top:446px;} #random_12{ left:0; top:446px;} #random_13{ left:0; top:298px;} #random_14{ left:0; top:148px;} #random_box li.random_current{border:2px solid red;}
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“如何實(shí)現(xiàn)Jquery轉(zhuǎn)盤抽獎(jiǎng)程序”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。