如何使用setInterval方法实现一个变速大转盘
导读:本文共2180字符,通常情况下阅读需要7分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 使用小程序来实现一个大转盘吧!大转盘都不陌生,开始抽奖,然后停止的位置就是获得的奖品。实现方法:setInterval先来实现一下匀速大转盘吧先将转盘设计好,比如3x3的大转盘,中间是个开始按钮;我这里设置的是背景颜色的变化,当抽奖到达某个位置时,这个位置的颜色发生变化;先贴一下我的ttml页面吧(不要在意我奇怪的配色~)//index.ttml<... ...
目录
(为您整理了一些要点),点击可以直达。使用小程序来实现一个大转盘吧!大转盘都不陌生,开始抽奖,然后停止的位置就是获得的奖品。
实现方法:setInterval
先来实现一下匀速大转盘吧
先看data:games是转盘上要显示的内容,转盘的格式可以根据自己的需求自己来写,我这个就是最基本的。active用来记录旋转到了什么位置,start用来记录开始的位置
再来看全局定义的round和timer。round用来设置一个轨迹,相当于铺路啦,里面是要走的下标,刚好是外围一圈。timer是定时器
最后看begin方法吧
比较简单,然后实现变速,其实速度的改变就是旋转一圈时间的改变
我这里的设计是:每旋转两圈实现一次变速,每次变速的时间在上一次时间上+100s,在第五圈停止
示例代码是根据旋转的圈数来进行变速,也可以根据旋转一定的时间来实现变速,这样就需要使用setTimeout来实现。
如何使用setInterval方法实现一个变速大转盘的详细内容,希望对您有所帮助,信息来源于网络。