小編給大家分享一下js實(shí)現(xiàn)抽獎(jiǎng)效果的方法有哪些,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)長(zhǎng)期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為新建企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì),新建網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
展示:
HTML:
<div id="table"></div> <div id="btn"> <button onclick="start('p', 'active','newactive', 100)">順序抽/停止</button> <button onclick="startRan('p', 'active','newactive', 100)">隨機(jī)抽/停止</button> </div>
CSS:
table { text-align: center; border-collapse: collapse; } table * { width: 60px; height: 60px; } #btn { box-sizing: border-box; width: 190px; display: flex; justify-content: space-between; align-items: center; } #btn * { flex-grow: 1; background-color: red; border: 1px solid #000; color: #fff; height: 30px; font-size: 10px; } .active { background-color: #ccc; } .newactive { background-color: #00ffff; }
JavaScript:
// 定義一個(gè)獎(jiǎng)池 var jackpot = [ ['獎(jiǎng)品A1', '獎(jiǎng)品A2', '獎(jiǎng)品A3'], ['獎(jiǎng)品B1', '獎(jiǎng)品B2', '獎(jiǎng)品B3'], ['獎(jiǎng)品C1', '獎(jiǎng)品C2', '獎(jiǎng)品C3'] ]; /** * [table 創(chuàng)建表格] * @param {[Array]} arr [獎(jiǎng)品數(shù)組] * @param {[String]} selector [選擇器] * @return {[String]} table [返回一個(gè)HTML標(biāo)簽] */ function table(arr, selector) { var table = '<table border="1">'; for (var i = 0; i < arr.length; i++) { table += '<tr>'; for (var j = 0; j < arr[i].length; j++) { table += '<td class="' + selector + '">' + arr[i][j] + '</td>'; } table += '</tr>'; } table += '</table>'; return table; } // 輸出獎(jiǎng)池 document.getElementById('table').innerHTML = table(jackpot, 'p'); var key = true; // start,startRan控制器 var num = 3; // 抽獎(jiǎng)次數(shù) // 抽過(guò)的還能抽 可定義抽獎(jiǎng)次數(shù)-->次數(shù)限制 num需要定義 // 不定義抽獎(jiǎng)次數(shù)-->次數(shù)無(wú)限 num不需定義 // 抽過(guò)的不能抽 可定義抽獎(jiǎng)次數(shù)-->次數(shù)限制(次數(shù)不超過(guò)選擇器長(zhǎng)度) num需要定義 // 不定義抽獎(jiǎng)次數(shù)-->次數(shù)等于選擇器長(zhǎng)度 num需要定義 /** * [start 開始抽獎(jiǎng)] * @param {[String]} selector [選擇器] * @param {[String]} addselector [給選中的添加樣式] * @param {[String]} newaddselector [中獎(jiǎng)獎(jiǎng)品樣式] * @param {[Number]} speed [時(shí)間越小,速度越快] * @return {[type]} [description] */ function start(selector, addselector, newaddselector, speed) { if (key) { if (typeof(num) == 'undefined' || num != 0) { var count = 0; // 如果寫成var timer會(huì)每次執(zhí)行時(shí)重新定義一個(gè)timer,那么clearInterval(timer)只能清除后面定義的那個(gè)timer,前面定義的已經(jīng)沒(méi)有變量指向了 無(wú)法清除 timer = setInterval(function() { if (count < $('.' + selector).length) { $('.' + selector).eq(count).addClass(addselector); $('.' + selector).eq(count).siblings().removeClass(addselector); $('.' + selector).eq(count).parent().siblings().children().removeClass(addselector); count++; } else { count = 0; } }, speed); if(typeof(num) != 'undefined'){ num--; } } else{ key = false; console.log("抽獎(jiǎng)結(jié)束"); } } else { clearInterval(timer); // 決定抽中的獎(jiǎng)品的樣式和抽中的獎(jiǎng)品能否繼續(xù)抽 $('.' + addselector).addClass(newaddselector).removeClass(selector); // 獎(jiǎng)品 console.log($('.' + addselector).html()); } key = !key; } /** * [start 開始抽獎(jiǎng)] * @param {[String]} selector [選擇器] * @param {[String]} addselector [給選中的添加樣式] * @param {[String]} newaddselector [中獎(jiǎng)獎(jiǎng)品樣式] * @param {[Number]} speed [時(shí)間越小,速度越快] * @return {[type]} [description] */ function startRan(selector, addselector, newaddselector, speed) { if (key) { if (typeof(num) == 'undefined' || num != 0) { // 如果寫成var timer會(huì)每次執(zhí)行時(shí)重新定義一個(gè)timer,那么clearInterval(timer)只能清除后面定義的那個(gè)timer,前面定義的已經(jīng)沒(méi)有變量指向了 無(wú)法清除 timer = setInterval(function() { var count = Math.floor(Math.random() * $('.' + selector).length); $('.' + selector).eq(count).addClass(addselector); $('.' + selector).eq(count).siblings().removeClass(addselector); $('.' + selector).eq(count).parent().siblings().children().removeClass(addselector); }, speed); if(typeof(num) != 'undefined'){ num--; } } else { key = false; console.log("抽獎(jiǎng)結(jié)束"); } } else { clearInterval(timer); // 決定抽中的獎(jiǎng)品的樣式和抽中的獎(jiǎng)品能否繼續(xù)抽 $('.' + addselector).addClass(newaddselector).removeClass(selector); // 獎(jiǎng)品 console.log($('.' + addselector).html()); } key = !key; }
以上是js實(shí)現(xiàn)抽獎(jiǎng)效果的方法有哪些的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
文章名稱:js實(shí)現(xiàn)抽獎(jiǎng)效果的方法有哪些
分享地址:http://muchs.cn/article6/geedog.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站制作、外貿(mào)建站、、關(guān)鍵詞優(yōu)化、營(yíng)銷型網(wǎng)站建設(shè)、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
營(yíng)銷型網(wǎng)站建設(shè)知識(shí)