如何使用setInterval方法实现一个变速大转盘

这篇文章主要讲解了“如何使用setInterval方法实现一个变速大转盘”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何使用setInterval方法实现一个变速大转盘”吧！

使用小程序来实现一个大转盘吧！大转盘都不陌生，开始抽奖，然后停止的位置就是获得的奖品。

实现方法：setInterval

先来实现一下匀速大转盘吧

先将转盘设计好，比如3 x 3 的大转盘，中间是个开始按钮;我这里设置的是背景颜色的变化，当抽奖到达某个位置时，这个位置的颜色发生变化；先贴一下我的ttml页面吧（不要在意我奇怪的配色~）// 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也贴一下吧，看效果直接复制就好了嘛// 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;}

另起一行，只是换个位置贴js

1. 先看data：games是转盘上要显示的内容，转盘的格式可以根据自己的需求自己来写，我这个就是最基本的。active用来记录旋转到了什么位置,start用来记录开始的位置

2. 再来看全局定义的round和timer。round用来设置一个轨迹，相当于铺路啦，里面是要走的下标，刚好是外围一圈。timer是定时器

3. 最后看begin方法吧

// index.jsconst 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);      }})

比较简单，然后实现变速，其实速度的改变就是旋转一圈时间的改变

我这里的设计是：每旋转两圈实现一次变速，每次变速的时间在上一次时间上+100s，在第五圈停止

//index.jsconst round = [0, 1, 2, 5, 8, 7, 6, 3, 0];let timer; // 定时器let num = 0; // 用来记录一共转了几次，方便判断转的圈数let start = 0; // 记录开始的位置下标let random = ''; // 记录停下来的随机数（下标）let time = 70; // 记录定时器的时间let count = 0; // 记录圈数，用来判断每2圈一次变速Page({  data: {    games: ['$1', '$2', '$3', '$4', '开始', '$5', '$6', '$7', '$8'],    active: 0,  },  onLoad: function (options) {},  beginLottery() {    this.begin1();  },  begin1() {    if(num != 0){    // 防止用户重复点击      return    }    timer = setInterval(this.process, time);  },  // 旋转的过程  process() {    start = start + 1;    if (start >= 8) {      start = 0;      // 当start = 8的时候，表示已经转过1圈了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);      // 转了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;    }  }})

示例代码是根据旋转的圈数来进行变速，也可以根据旋转一定的时间来实现变速，这样就需要使用setTimeout来实现。

感谢各位的阅读，以上就是“如何使用setInterval方法实现一个变速大转盘”的内容了，经过本文的学习后，相信大家对如何使用setInterval方法实现一个变速大转盘这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！