jQuery移動(dòng)端跑馬燈抽獎(jiǎng)特效升級(jí)版(抽獎(jiǎng)概率固定)實(shí)現(xiàn)方法
本文實(shí)例講述了jQuery移動(dòng)端跑馬燈抽獎(jiǎng)特效升級(jí)版(抽獎(jiǎng)概率固定)實(shí)現(xiàn)方法。分享給大家供大家參考,具體如下:
項(xiàng)目描述:九宮格的跑馬燈抽獎(jiǎng)特效,抽中獎(jiǎng)品1-9的概率分別是2%,2%,4%,1%,12%,1%,8%,70%,概率總計(jì)100%,并且每天抽獎(jiǎng)次數(shù)最多為3次。

html部分的代碼和css部分的代碼和上一節(jié)《jQuery移動(dòng)端跑馬燈抽獎(jiǎng)特效》一樣,沒(méi)有修改,js部分有修改,增加了概率。
原理很簡(jiǎn)單,同樣是取隨機(jī)數(shù),判斷這個(gè)隨機(jī)數(shù)的大小在100的0-2,2-4,4-8,8-9,9-21,21-22,22-30,30-100之間的哪一個(gè)數(shù)組內(nèi),隨機(jī)就可判斷中哪個(gè)獎(jiǎng)項(xiàng)。
代碼在前面一篇《jQuery移動(dòng)端跑馬燈抽獎(jiǎng)特效》js的代碼上面增加了一個(gè)maths_f()函數(shù),如下:
function maths_f(maths){
if(maths>0&&maths<2){
console.log('恭喜獲得獎(jiǎng)品1')
twice=1;
}else if(maths>=2&&maths<=4){
console.log('恭喜獲得獎(jiǎng)品2')
twice=2;
}else if(maths>=4&&maths<8){
console.log('恭喜獲得獎(jiǎng)品3')
twice=3;
}else if(maths>=8&&maths<9){
console.log('恭喜獲得獎(jiǎng)品4')
twice=4;
}else if(maths>=9&&maths<21){
console.log('恭喜獲得獎(jiǎng)品5')
twice=5;
}else if(maths>=21&&maths<22){
console.log('恭喜獲得獎(jiǎng)品6')
twice=6;
}else if(maths>=22&&maths<30){
console.log('恭喜獲得獎(jiǎng)品7')
twice=7;
}else if(maths>=30&&maths<100){
console.log('恭喜獲得獎(jiǎng)品8')
twice=8;
}
light();
}
start()函數(shù)也有修改,修改為:
$('.start').click(function() {
if(click&&num>0) {
click = false;
maths = (Math.random() * 100);
console.log(maths)
maths_f(maths);
} else {
return false;
}
});
其他的自己看著改吧。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery操作DOM節(jié)點(diǎn)方法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- 詳解vue移動(dòng)端項(xiàng)目代碼拆分記錄
- 使用vue開(kāi)發(fā)移動(dòng)端管理后臺(tái)的注意事項(xiàng)
- vue插件mescroll.js實(shí)現(xiàn)移動(dòng)端上拉加載和下拉刷新
- 移動(dòng)端(微信等使用vConsole調(diào)試console的方法
- 利用Vconsole和Fillder進(jìn)行移動(dòng)端抓包調(diào)試方法
- jQuery實(shí)現(xiàn)適用于移動(dòng)端的跑馬燈抽獎(jiǎng)特效示例
- 如何封裝了一個(gè)vue移動(dòng)端下拉加載下一頁(yè)數(shù)據(jù)的組件
- 原生js實(shí)現(xiàn)移動(dòng)端Touch輪播圖的方法步驟
- js實(shí)現(xiàn)移動(dòng)端輪播圖
- 移動(dòng)端使用CSS或JS判斷橫屏和豎屏的講解
相關(guān)文章
使用jquery自定義鼠標(biāo)樣式滿足個(gè)性需求
瀏覽器是有自帶的鼠標(biāo)樣式的,如果某些時(shí)候?yàn)榱吮3质髽?biāo)樣式的統(tǒng)一,或者想指定特定的鼠標(biāo)樣式該怎么辦呢?那就要使用自定義了,下面有個(gè)不錯(cuò)的示例,喜歡的朋友可以參考下2013-11-11
jQuery實(shí)現(xiàn)表格奇偶行顯示不同背景色 就這么簡(jiǎn)單
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表格奇偶行顯示不同背景色的方法,使表格更加美觀,便捷的查找同行數(shù)據(jù)更,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
JQuery日歷插件My97DatePicker日期范圍限制
這篇文章主要介紹了JQuery日歷插件My97DatePicker日期范圍限制的相關(guān)資料,需要的朋友可以參考下2016-01-01
jquery自動(dòng)完成插件(autocomplete)應(yīng)用之PHP版
一般網(wǎng)上這個(gè)用于搜索功能增強(qiáng),增加用戶體驗(yàn),還是不錯(cuò)的。2009-12-12
jQuery實(shí)現(xiàn)ajax的疊加和停止(終止ajax請(qǐng)求)
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax的疊加和停止的關(guān)鍵代碼,代碼簡(jiǎn)單易懂,需要的朋友可以參考下2016-08-08
jQuery插件HighCharts繪制2D柱狀圖、折線圖和餅圖的組合圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D柱狀圖、折線圖和餅圖的組合圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts插件同時(shí)繪制折線圖、柱狀圖、餅狀圖組合圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jQuery CSS()方法改變現(xiàn)有的CSS樣式
css()方法在使用上具有多樣性。其中有一種可接受兩個(gè)輸入?yún)?shù):樣式屬性和樣式值,兩者之間用逗號(hào)分隔,下面通過(guò)實(shí)例為大家介紹下2014-08-08

