当前位置: 首页 > news >正文

大转盘抽奖小程序源码

源码介绍

大转盘抽奖小程序源码,测试依旧可用,无BUG,跑马灯旋转效果,非常酷炫。

小程序核心代码参考

//index.js
//获取应用实例
var app = getApp()
Page({data: {circleList: [],//圆点数组awardList: [],//奖品数组colorCircleFirst: '#FFDF2F',//圆点颜色1colorCircleSecond: '#FE4D32',//圆点颜色2colorAwardDefault: '#F5F0FC',//奖品默认颜色colorAwardSelect: '#ffe400',//奖品选中颜色indexSelect: 0,//被选中的奖品indexisRunning: false,//是否正在抽奖imageAward: ['../../images/1.jpg','../../images/2.jpg','../../images/3.jpg','../../images/4.jpg','../../images/5.jpg','../../images/6.jpg','../../images/7.jpg','../../images/8.jpg',],//奖品图片数组},onLoad: function () {var _this = this;//圆点设置var leftCircle = 7.5;var topCircle = 7.5;var circleList = [];for (var i = 0; i < 24; i++) {if (i == 0) {topCircle = 15;leftCircle = 15;} else if (i < 6) {topCircle = 7.5;leftCircle = leftCircle + 102.5;} else if (i == 6) {topCircle = 15leftCircle = 620;} else if (i < 12) {topCircle = topCircle + 94;leftCircle = 620;} else if (i == 12) {topCircle = 565;leftCircle = 620;} else if (i < 18) {topCircle = 570;leftCircle = leftCircle - 102.5;} else if (i == 18) {topCircle = 565;leftCircle = 15;} else if (i < 24) {topCircle = topCircle - 94;leftCircle = 7.5;} else {return}circleList.push({ topCircle: topCircle, leftCircle: leftCircle });}this.setData({circleList: circleList})//圆点闪烁setInterval(function () {if (_this.data.colorCircleFirst == '#FFDF2F') {_this.setData({colorCircleFirst: '#FE4D32',colorCircleSecond: '#FFDF2F',})} else {_this.setData({colorCircleFirst: '#FFDF2F',colorCircleSecond: '#FE4D32',})}}, 500)//奖品item设置var awardList = [];//间距,怎么顺眼怎么设置吧.var topAward = 25;var leftAward = 25;for (var j = 0; j < 8; j++) {if (j == 0) {topAward = 25;leftAward = 25;} else if (j < 3) {topAward = topAward;//166.6666是宽.15是间距.下同leftAward = leftAward + 166.6666 + 15;} else if (j < 5) {leftAward = leftAward;//150是高,15是间距,下同topAward = topAward + 150 + 15;} else if (j < 7) {leftAward = leftAward - 166.6666 - 15;topAward = topAward;} else if (j < 8) {leftAward = leftAward;topAward = topAward - 150 - 15;}var imageAward = this.data.imageAward[j];awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward });}this.setData({awardList: awardList})},//开始游戏startGame: function () {if (this.data.isRunning) returnthis.setData({isRunning: true})var _this = this;var indexSelect = 0var i = 0;var timer = setInterval(function () {indexSelect++;//这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度i += 30;if (i > 1000) {//去除循环clearInterval(timer)//获奖提示wx.showModal({title: '恭喜您',content: '获得了第' + (_this.data.indexSelect + 1) + "个优惠券",showCancel: false,//去掉取消按钮success: function (res) {if (res.confirm) {_this.setData({isRunning: false})}}})}indexSelect = indexSelect % 8;_this.setData({indexSelect: indexSelect})}, (200 + i))}
})

image.png

下载地址

https://pan.baidu.com/s/1NChGx23UK-dUjnU2cj8XYQ?pwd=mmti

http://www.lryc.cn/news/332013.html

相关文章:

  • 数据结构(无图版)
  • 软件测试中的顶级测试覆盖率技术
  • vscode使用技巧
  • JSP
  • Mybatis--TypeHandler使用手册
  • 网络编程(TCP、UDP)
  • Python快速入门系列-7(Python Web开发与框架介绍)
  • 最长对称子串
  • 【大模型】大模型 CPU 推理之 llama.cpp
  • 异地组网怎么管理?
  • Kafka参数介绍
  • 如何利用待办事项清单提高工作效率?
  • 力扣经典150题第二题:移除元素
  • 55555555555555
  • 用Skimage学习数字图像处理(018):图像形态学处理(上)
  • MySQL中 in 和 exists 区别
  • Java基础 - 代码练习
  • 【Redis】redis集群模式
  • 基于opencv的猫脸识别模型
  • 基于注意力整合的超声图像分割信息在乳腺肿瘤分类中的应用
  • 数据库重点知识(个人整理笔记)
  • [技术闲聊]checklist
  • 力扣刷题 二叉树的迭代遍历
  • 【二】Django小白三板斧
  • MyBatis的基本应用
  • Day80:服务攻防-中间件安全HW2023-WPS分析WeblogicJettyJenkinsCVE
  • 使用generator实现async函数
  • go并发请求url
  • 刷题之Leetcode704题(超级详细)
  • leetcode热题100.前k个高频元素