您好,登錄后才能下訂單哦!
這篇文章主要講解了“如何使用setInterval方法實(shí)現(xiàn)一個(gè)變速大轉(zhuǎn)盤”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“如何使用setInterval方法實(shí)現(xiàn)一個(gè)變速大轉(zhuǎn)盤”吧!
使用小程序來(lái)實(shí)現(xiàn)一個(gè)大轉(zhuǎn)盤吧!大轉(zhuǎn)盤都不陌生,開始抽獎(jiǎng),然后停止的位置就是獲得的獎(jiǎng)品。
實(shí)現(xiàn)方法:setInterval
先來(lái)實(shí)現(xiàn)一下勻速大轉(zhuǎn)盤吧
先將轉(zhuǎn)盤設(shè)計(jì)好,比如3 x 3 的大轉(zhuǎn)盤,中間是個(gè)開始按鈕; 我這里設(shè)置的是背景顏色的變化,當(dāng)抽獎(jiǎng)到達(dá)某個(gè)位置時(shí),這個(gè)位置的顏色發(fā)生變化; 先貼一下我的ttml頁(yè)面吧(不要在意我奇怪的配色~) // index.ttml <view class="container"> <view class="box"> <view class="item" style="background-color: {{ index == 4 ? 'red': (index == active ? 'rgb(229, 250, 250)' : 'rgb(236, 216, 135)')}};" tt:for="{{games}}" bindtap="{{index == 4 ? 'beginLottery' : ''}}">{{item}}</view> </view> </view> 順便css也貼一下吧,看效果直接復(fù)制就好了嘛 // index.ttss .box{ margin: 0 auto; width: 600rpx; display: flex; flex-wrap: wrap; border: 1px solid black; } .item{ width: 200rpx; height: 200rpx; line-height: 200rpx; text-align: center; }
先看data:games是轉(zhuǎn)盤上要顯示的內(nèi)容,轉(zhuǎn)盤的格式可以根據(jù)自己的需求自己來(lái)寫,我這個(gè)就是最基本的。active用來(lái)記錄旋轉(zhuǎn)到了什么位置,start用來(lái)記錄開始的位置
再來(lái)看全局定義的round和timer。round用來(lái)設(shè)置一個(gè)軌跡,相當(dāng)于鋪路啦,里面是要走的下標(biāo),剛好是外圍一圈。timer是定時(shí)器
最后看begin方法吧
// index.js const round = [0,1,2,5,8,7,6,3,0]; let timer ; Page({ data: { games:['$1','$2','$3','$4','開始','$5','$6','$7','$8'], active: 0, start: 0, }, onLoad: function (options) { }, beginLottery(){ this.begin(); }, // begin begin(){ let start = this.data.start; let random = Math.floor(Math.random()*9); let num = 0; timer = setInterval(() => { start++; start = start > 8 ? 0 : start; this.setData({ start, active: round[start] }) num++; if(num > 24 && this.data.active == random){// clearInterval(timer) } }, 70); } })
比較簡(jiǎn)單,然后實(shí)現(xiàn)變速,其實(shí)速度的改變就是旋轉(zhuǎn)一圈時(shí)間的改變
我這里的設(shè)計(jì)是:每旋轉(zhuǎn)兩圈實(shí)現(xiàn)一次變速,每次變速的時(shí)間在上一次時(shí)間上+100s,在第五圈停止
//index.js const round = [0, 1, 2, 5, 8, 7, 6, 3, 0]; let timer; // 定時(shí)器 let num = 0; // 用來(lái)記錄一共轉(zhuǎn)了幾次,方便判斷轉(zhuǎn)的圈數(shù) let start = 0; // 記錄開始的位置下標(biāo) let random = ''; // 記錄停下來(lái)的隨機(jī)數(shù)(下標(biāo)) let time = 70; // 記錄定時(shí)器的時(shí)間 let count = 0; // 記錄圈數(shù),用來(lái)判斷每2圈一次變速 Page({ data: { games: ['$1', '$2', '$3', '$4', '開始', '$5', '$6', '$7', '$8'], active: 0, }, onLoad: function (options) {}, beginLottery() { this.begin1(); }, begin1() { if(num != 0){ // 防止用戶重復(fù)點(diǎn)擊 return } timer = setInterval(this.process, time); }, // 旋轉(zhuǎn)的過程 process() { start = start + 1; if (start >= 8) { start = 0; // 當(dāng)start = 8的時(shí)候,表示已經(jīng)轉(zhuǎn)過1圈了count+1 count = count + 1; } this.setData({ active: round[start] }) num = num + 1; // 實(shí)現(xiàn)兩圈一次變速 if (num % 8 === 0 && count === 2) { count = 0; clearInterval(timer); time = time + 100; timer = setInterval(this.process, time); // 轉(zhuǎn)了4圈,即將在第五圈停止 if (Math.floor(num / 8) === 4) { this.getRandom(); } } if (this.data.active === random) { clearInterval(timer); num = 0; random = ''; time = 70; count = 0; } }, getRandom(){ let n = Math.floor(Math.random() * 9); if(n == 4){ this.getRandom(); }else{ random = n return; } } })
示例代碼是根據(jù)旋轉(zhuǎn)的圈數(shù)來(lái)進(jìn)行變速,也可以根據(jù)旋轉(zhuǎn)一定的時(shí)間來(lái)實(shí)現(xiàn)變速,這樣就需要使用setTimeout來(lái)實(shí)現(xiàn)。
感謝各位的閱讀,以上就是“如何使用setInterval方法實(shí)現(xiàn)一個(gè)變速大轉(zhuǎn)盤”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)如何使用setInterval方法實(shí)現(xiàn)一個(gè)變速大轉(zhuǎn)盤這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(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)容。