Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use the setInterval method to achieve a variable speed turntable". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use the setInterval method to achieve a variable speed turntable".

Use Mini Program to achieve a big turntable! The big turntable is no stranger, start the lottery, and then stop the position is the prize.

Implementation method: setInterval

First, let's achieve a uniform speed turntable.

First, design the turntable, such as a 3 x 3 turntable with a start button in the middle. What I set here is the change of the background color. When the lottery reaches a certain position, the color of this position changes. Post my ttml page first (never mind my strange color matching) / / index.ttml {{item}} and css, and copy it directly / / 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;} start another line, just post js from another location

First look at data:games is the content to be displayed on the turntable, the format of the turntable can be written according to their own needs, I this is the most basic. Active is used to record the position of rotation, and start is used to record the position of the beginning.

Let's look at the globally defined round and timer. Round is used to set a track, which is equivalent to paving the road, and inside is the subscript to go, which happens to be the outer circle. Timer is the timer.

Finally, let's look at the begin method.

/ / index.jsconst round = [0 data 1, 2, 7, 7, 7, 7, 7, 7, and 3]; let timer; Page ({data: {games: ['$1, 5, 5, 5, 5, 5, 8, 8, 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);})

It is relatively simple, and then realize the change of speed, in fact, the change of speed is the change of rotation time.

My design here is: change the speed every two turns, the time of each change is + 100s on the last time, and stop on the fifth lap.

/ / index.jsconst round = [0, 1, 2, 5, 8, 7, 6, 3, 0]; let timer; / / timer let num = 0; / / used to record a total of several times, it is convenient to judge the number of turns let start = 0; / / the starting position of the record is subscript let random =''; / / the random number (subscript) let time of recording stops is 70; / / the time let count of recording timer is 0 / / record the number of laps, which is used to judge the speed change Page every 2 laps ({data: {games: ['$1mm,'$2pm,'$3pm,'$4pm, 'start','$5pm,'$6pm,'$7pm,'$8'], active: 0,}, onLoad: function (options) {}, beginLottery () {this.begin1 () }, begin1 () {if (num! = 0) {/ / prevent users from repeatedly clicking return} timer = setInterval (this.process, time);}, / / the process of rotation process () {start = start + 1; if (start > = 8) {start = 0; / / when start = 8, it means that count+1 count = count+1 has been turned one turn } this.setData ({active: round [start]}) num = num + 1; / / realize two laps and one speed change if (num% 8 = = 0 & & count = 2) {count = 0; clearInterval (timer); time = time + 100; timer = setInterval (this.process, time) / / after 4 laps, 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;}})

The sample code is to change the speed according to the number of turns, or according to the rotation for a certain period of time, so you need to use setTimeout to achieve.

Thank you for reading, the above is the content of "how to use setInterval method to achieve a variable speed turntable". After the study of this article, I believe you have a deeper understanding of how to use setInterval method to achieve a variable speed turntable, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.