主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
如何使用小程序实现大型变速转盘?在下一篇文章中,我将向您展示如何使用小程序实现大型变速转盘。 希望这对您有所帮助!
用小程序实现大转盘! 我们都熟悉大型旋转木马。 抽奖开始,抽奖停止的地方中奖。
实现方法:setInterval
我们先实现一个匀速的大转盘。
首先实现一个匀速的大转盘,比如3 x 3的大转盘设计一个转盘。 中间。 I 这里的设置是改变背景颜色。 当彩票到达某个位置时,该位置的颜色就会发生变化。 先贴出你的ttml页面(不用担心颜色搭配怪异~) //index.ttml {{item}} 顺便说一句,也请发布你的CSS。 复制一下看看效果就可以了。 //index.ttss.box{ 边距:0 auto; 宽度:600rpx; 显示:flex-wrap:边框:1px 实心 bl;ack;}.item{width: 200rpx; height: 200rpx; line-height: 200rpx; text-align: center;} 新建一行,重新定位并粘贴js。 首先,我们来检查一下数据。 游戏将显示在转盘上。 转盘的内容和格式可以根据您的需要创建。 这对我来说是最基本的事情。 active 用于记录旋转的位置,start 用于记录起始位置并检查全局定义的轮次和计时器。 回合用于设定轨迹。 这相当于铺了一条路。 里面我们有一个行走下标,它只是外圆。 计时器就是计时器。 我们看一下最终的begin方法 //index.jsconstround = [0,1,2,5,8,7,6,3,0];let timer ;Page({ data: { games:['$1 ' ,'$2','$3','$4','开始','$5','$6','$7','$8'], 活动: 0, 开始: 0, }, onLoad: 函数 (options) { }, beginLottery(){ this.begin(); }, // 开始 begin(){ let start = this.data.start; let random = Math.floor(Math.random()* 9);让 num = 0; 计时器 = setInterval(() => { start++; start = start > 8 ? 0 : start; this.setData({ start, active:round[start] }) number++;if(num > 24 && this.data.active ==random){//clearInterval(timer) } }, 70); }})
比较简单,但是感受一下速度的变化。 事实上,速度的变化就是一转时间的变化。
//index.jsconstron = [0, 1, 2, 5, 8, 7, 6, 3, 0];let timer; // 设置计时器为 num = 0。 // 用于记录总圈数,方便判断圈数。 let start = 0; // 记录起始位置的下标 let random = ''; // 停止记录 随机数(下标)为 time = 70。 // 记录计时器时间 let count = 0; // 记录圈数并确定每 2 圈的速度变化 Page({ data: { games: ['$1', '$2', '$3 ', '$4 ', 'Start', '$5', ' $6', '$7', '$8'], active: 0, }, onLoad: 函数(可选){}, beginLottery() { this.begin1(); }, begin1() { if(num != 0){ // 防止用户重复点击 return } timer = setInterval(this.process, time) }, // 旋转过程 process () { start = start; + 1; if (start >= 8) { start = 0; 如果start = 8,则表示旋转了一圈 count+1 count +1; this.setData({ active:round[start] }) num = num + 1; // 实现 每 2 转改变一次速度 if (num % 8 === 0 && count === 2) { count = 0 ;clearInterval(timer);time = time + 100;timer = setInterval(this.process, time); // 旋转 4 圈, 5 停在第 圈 if (Math.floor(num / 8) === 4) { this.getRandom(); If (this.data.active === random) {clearInterval(timer); = ''; 计数 = 0; getRandom(){ 让 n = Math.f loor(Math.random() * 9); this.getRandom(); }else{ random = n return; )
示例代码中,根据旋转次数改变速度,但也可以根据恒定的旋转时间改变速度,所以你需要使用setTimeout来实现这一点。
好了,本次记录就到此结束。 有更好的解决方案和性能优化。 欢迎评论!
【相关学习推荐:小程序开发教程】
PHP快速学习视频免费教程(从初学者到大师)
如何开始学习PHP? 这里有简单的 PHP 学习教程(从初学者到专家)。 您可以保存并下载您想学习的朋友。
下载
这几篇文章你可能也喜欢:
本文由主机参考刊发,转载请注明:简单讲解如何用小程序实现大型变速转盘 https://zhujicankao.com/142788.html
评论前必须登录!
注册