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)特效》一樣,沒有修改,js部分有修改,增加了概率。
原理很簡單,同樣是取隨機(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常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- 詳解vue移動(dòng)端項(xiàng)目代碼拆分記錄
- 使用vue開發(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)端下拉加載下一頁數(shù)據(jù)的組件
- 原生js實(shí)現(xiàn)移動(dòng)端Touch輪播圖的方法步驟
- js實(shí)現(xiàn)移動(dòng)端輪播圖
- 移動(dòng)端使用CSS或JS判斷橫屏和豎屏的講解
相關(guān)文章
淺談jQuery中對(duì)象遍歷.eq().first().last().slice()方法
本文給大家分析了jQuery中的對(duì)象遍歷.eq().first().last().slice()方法的使用,以及他們之間的區(qū)別,jQuery源碼中的使用。2014-11-11基于jquery實(shí)現(xiàn)滾輪放大縮小圖片的函數(shù)代碼
這篇文章主要介紹了基于jquery實(shí)現(xiàn)滾輪放大縮小圖片的函數(shù)代碼,需要的朋友可以參考下2023-05-05使用jQuery fancybox插件打造一個(gè)實(shí)用的數(shù)據(jù)傳輸模態(tài)彈出窗體
模態(tài)窗體已經(jīng)成為Web開發(fā)人員設(shè)計(jì)界面時(shí)經(jīng)常要使用的傳輸數(shù)據(jù)的方式;通過模態(tài)窗口,可以提高網(wǎng)站的可用性;你可以在你的郵件里收到用戶發(fā)送的反饋消息2013-01-01jQuery 添加/移除CSS類實(shí)現(xiàn)代碼
在網(wǎng)頁設(shè)計(jì)中,我們常常要使用Javascript來改變頁面元素的樣式。2010-02-02使用jQueryMobile實(shí)現(xiàn)滑動(dòng)翻頁效果的方法
這篇文章主要介紹了使用jQueryMobile實(shí)現(xiàn)滑動(dòng)翻頁效果的方法,較為詳細(xì)的分析了jQueryMobile實(shí)現(xiàn)滑動(dòng)翻頁效果的原理與實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02