Use a small program to achieve a large turntable! Big wheel is familiar, start drawing, and then stop the position is to win the prize.

Implementation method: setInterval

Let’s start with the uniform rotary wheel

Design the turntable well, such as a 3 x 3 large turntable with a start button in the middle; What I set here is the change of background color. When the lottery reaches a certain position, the color of this position changes; // 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 ? }}">{{item}}</view> </view> </view> width: 600rpx; display: flex; flex-wrap: wrap; border: 1px solid black; } .item{ width: 200rpx; height: 200rpx; line-height: 200rpx; text-align: center; }Copy the code

Another line, just change the position to paste JS

  1. Data: Games is the content to be displayed on the turntable, the turntable format can be written according to their own needs, I this is the most basic. Active is used to record the rotation to what position,start is used to record the start position
  2. Let’s look at the globally-defined rounds and timers. Round is used to set a track, which is like paving the way, and inside is the index to go, which happens to be the outer circle. A timer is a time
  3. Finally, look at the begin method
// index.js const round = [0,1,2,5,8,7,6,3,0]; let timer ; Page ({data: {games: [' $1 ', '$2', '$3', '$4', 'start', '$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); }})Copy the code

Relatively simple, and then achieve speed change, in fact, the change in speed is a revolution of time change

My design here is: every two turns to achieve a change of speed, each change of time +100s on the previous time, stop in the fifth turn

/index.js const round = [0, 1, 2, 5, 8, 7, 6, 3, 0]; let timer; // let num = 0; // let start = 0; // let random = ''; // Record stop random number (subscript) let time = 70; Let count = 0; / / record laps, which is used to determine once every 2 ring gear Page ({data: {games: [' $1 ', '$2', '$3', '$4', 'start', '$5', '$6', '$7', '$8], active: 0,}, onLoad: function (options) {}, beginLottery() { this.begin1(); }, begin1() { if(num ! Timer = setInterval(this.process, time); }, // Process () {start = start + 1; if (start >= 8) { start = 0; Count +1 count = count+1; } this.setData({ active: round[start] }) num = num + 1; If (num % 8 === 0 &&count === 2) {count = 0; clearInterval(timer); time = time + 100; timer = setInterval(this.process, time); 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; }}})Copy the code

The example code is to change the speed according to the number of turns of the rotation, or to change the speed according to a certain amount of time of rotation, which requires the use of setTimeout.

Well, this time the record here, there are better solutions, performance optimization welcome to comment!