let timer;

let onDrawing = false; // 是否可进行抽奖标识,默认为false可进行抽奖

let drawIndex = 0; //抽奖过程KEY

Component({

/**

* 组件的属性列表

*/

properties: {

},

/**

* 关闭组件样式隔离

*/

options: {

styleIsolation: 'apply-shared'

},

/**

* 组件的初始数据

*/

data: {

// 奖品参数信息

prizeList: [

{ id: '001', index: 1, imgsrc: 'https://hbimg.huabanimg.com/18b925338313c77ee90c6a0a2f052a7988e10ce515ca7-T4bMZ0_fw658', prizeName: '谢谢参与' },

{ id: '002', index: 2, imgsrc: 'https://hbimg.huabanimg.com/2acfd641286f1a7e4050ca13e207c1d2fc2cbf5f12ca2-W5O1vm_fw658', prizeName: '金币 x20' },

{ id: '003', index: 3, imgsrc: 'https://hbimg.huabanimg.com/72138f8f82134a9099eaa02d5d81fa738519716021e4c-idXlQk_fw658', prizeName: '火箭 x1' },

{ id: '004', index: 4, imgsrc: 'https://hbimg.huabanimg.com/96e0a27d3a6b25dacd7157db6879b63be9e1addd126ac-sMVvOt_fw658', prizeName: '神秘礼盒 x1' },

{ id: '005', index: 5, imgsrc: 'https://hbimg.huabanimg.com/aa694a1e151f2cb8d8583eee9d1cbf0342b5577b953c-O0MFoR_fw658', prizeName: '水晶血瓶 x1' },

{ id: '006', index: 6, imgsrc: 'https://hbimg.huabanimg.com/2fe60709c9479b41ec3eef7fff1101f683b4ad89254af-HNdtDR_fw658', prizeName: '金币 x10' },

{ id: '007', index: 7, imgsrc: 'https://hbimg.huabanimg.com/407d1f6d9aa47e757994d9474dba7257c4c73bd11123a-5juBN1_fw658', prizeName: '水晶钻石 x5' },

{ id: '008', index: 8, imgsrc: 'https://hbimg.huabanimg.com/513f6f7d9f323e7cc3e252444237a84b52a98890c375-LGfXRi_fw658', prizeName: '水晶盒 x1' },

],

drawIndex: null, //抽奖过程KEY

prizeResult: null, //抽奖结果KEY

prizeName: null, //抽奖结果KEY对应的奖品名称

isShowLuck: false, // 是否显示奖品弹窗,默认false不显示

showAgain: false, //是否抽奖后显示再抽一次按钮

awardImage: '', // 弹窗展示的奖品照片

awardName:'', // 弹窗展示的奖品名字

},

/**

* 组件的方法列表

*/

methods: {

//抽奖操作

startDraw() {

if (onDrawing) {

return;

} else {

onDrawing = true;

}

clearInterval(timer);

timer = setInterval(()=>{

this.changePrize()

}, 80);

// 随机将品池

let random = Math.floor(Math.random() * this.data.prizeList.length)

let res = {

stutus: 1,

prizeResult: this.data.prizeList[random].index,

prizeName: this.data.prizeList[random].prizeName,

}

if (res.stutus == 1) {

setTimeout( ()=> {

clearInterval(timer);

timer = setInterval(()=>{

this.changePrize()

}, 200);

setTimeout( ()=> {

clearInterval(timer);

timer = setInterval(()=>{

this.changePrize()

}, 420);

setTimeout( () => {

this.setData({

prizeResult: res.prizeResult,

prizeName: res.prizeName,

});

}, 1000)

}, 1200)

}, 1800)

}

},

//抽奖过程奖品切换

changePrize() {

drawIndex++;

drawIndex = drawIndex > 8 ? 1 : drawIndex;

this.setData({

drawIndex: drawIndex

});

if (this.data.prizeResult == drawIndex) {

clearInterval(timer);

let currentAward = this.data.prizeList[this.data.prizeResult - 1]

this.setData({

showAgain: true,

isShowLuck: true,

awardImage: currentAward.imgsrc,

awardName: currentAward.prizeName

});

}

},

//点击再抽一次按钮

againBtn() {

onDrawing = false;

drawIndex = 0; //抽奖过程KEY

this.setData({

drawIndex: null, // 清空抽奖过程KEY

prizeResult: null, // 清空抽奖结果KEY

prizeName: null, // 清空抽奖结果KEY对应的奖品名称

showAgain: false, // 是否抽奖后显示再抽一次按钮

awardImage: '', // 清空奖品展示的图片

awardName: '' // 清空奖品的展示名称

});

},

// 关闭奖品弹簧

closePopup(){

this.setData({

isShowLuck: false

})

}

}

})

html 小程序九宫格抽奖,【小程序与公众号】微信小程序九宫格抽奖(抽奖完全随机)...相关推荐

  1. 微信公众号/微信小程序获取用户信息以及推送微信模版消息_MQ

    微信公众号/微信小程序获取用户信息以及推送微信模版消息_MQ 一.获取用户信息 1.首先我们需要了解什么是微信用户的OpenID 在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密 ...

  2. 微信小程序再放新能力,公众号关联小程序的主体不再受限

    声明:本文来自阿拉丁互动社区公众号(微信号ALaDingWeChat). 责编:陈秋歌,寻求报道或者投稿请发邮件至chenqg#csdn.net,或加微信:Rachel_qg. 了解更多前沿技术资讯, ...

  3. 微信公众号微信小程序申请出现的问题

    由于之前把身份证号借给别人去申请过公众号,导致自己一直不知道为什么会出现 我知道个人身份证改得只能申请一个账号,但是一直不知道自己什么时候申请过,最后在网上招了很对东西,找到一个叫微信公众平台助手的东 ...

  4. h5商城模板_“公众号+小程序”才是做微信商城的正确方式

    如果你问做商城是用公众号好还是小程序好,而回答你只做其中一个的,那么你可以不理他了! 我的答案是:公众号 + 小程序!必须一起做 小程序是一个趋势. 虽然小程序在微信里有着很多独立入口,但是有好些重要 ...

  5. 微信登录并拿手机号码(实战)目前仅公众号及小程序登录

    公众号.小程序内用户登录(拿不到手机号码,官方没文档)以及Uni-app小程序内用户授权手机号码 1.公众号.小程序内用户登录 公众号登录重定向跨域问题 工具类 Java代码 演示 公众号 小程序 2 ...

  6. 微信小程序最新开发资源汇总,对学习微信小程序的新手有一定帮助

    微信小程序最新开发资源汇总,希望给想学习或正在学习微信小程序开发的同学们带来一定帮助,汇总的小程序资源有点繁杂,各种类型的小程序demo都有,大家可以选择自己想要的demo进行下载学习.这些微信小程序 ...

  7. python开发跟淘宝有关联微_为什么微商和淘宝卖家不得不做公众号和小程序?

    文/王爷 整理/叨叨 最近一个月,微信方面的动作比较多,尤其是有关微信小程序方面的动态,起码更新了4次.或许很多人还不知道什么是微信小程序,简单来说就是一个无需安装.即用即走的生长在微信上的一个应用. ...

  8. android源码大全 IOS游戏源代码打包下载 小游戏|视频教程 微信小程序源码带后台全套|公众号平台

    不断更新中,下面是2017-12-22更新部分 IOS_源码及视频一小部分: 开发环境:Xcode 基于cocos2d的tweejump跳跃游戏ios经典游戏源码.rar  https://pan.b ...

  9. 微信小程序页面上面的名字怎么改_微信小程序改名方法,小程序名称设置规范...

    小程序名称设置规范 1.名称设置方法 1)小程序名称可以由中文.数字.英文.长度在4-30个字符之间,一个中文字等于2个字符. 2)公众号.小程序在微信公众平台上的名称是唯一的,且属于同一主体下,可以 ...

  10. 2019小程序没必要做了_2019微信小程序的发展前景怎么样?有必要开发微信小程序吗?...

    微信小程序自从上线以来,一直很受大家的欢迎,当然微信小程序的功能也在不断的更新着,小程序共有七项主要功能,相信创业者对于这7种不同的功能,会迸发出更多的奇思妙想,那么通过功能我们可以思考一下,2019 ...

最新文章

  1. 有理有据!为什么String选择数字31作为hashCode方法乘子?
  2. 中国地区三级联动下拉菜单的实现
  3. CSS:CSS 在工程中改变——面向对象的CSS (OO CSS)
  4. 转的:SQL执行提高效率的多种方法
  5. 频频被关注的 AI,怎样才能用着舒心?
  6. 安装Go 1.9.2
  7. Python处理mongo结果中的ObjectId类型为字符串
  8. BZOJ1111 : [POI2007]四进制的天平Wag
  9. 利用阿里云提供的镜像快速更换本地的yum源
  10. 树莓派raspberrypi系统安装docker以及编译nginx和php镜像
  11. python snap7开发手册_python-snap7开发笔记
  12. Element el-cascader 级联选择器详解
  13. win10如何删除输入法_win10如何添加和删除输入法_win10系统添加和删除输入法的图文教程...
  14. VC浏览器的定制与扩展
  15. (九)统计学习方法 | 隐马尔可夫模型
  16. mac下 iterm+Zsh+Oh My Zsh+tmux 配置方案
  17. Java基础知识点总结(面试版)
  18. Agv、Rgv 车辆控制调度系统开发第一篇
  19. OpenCV C++开发 第一节:Win7开发环境搭建
  20. 重磅!GitHub突然宣布,对全球人免费开放全部核心功能

热门文章

  1. proxifier 注册码
  2. 关于程序员35岁的坎:年龄不是挡板,图灵学院视频下载
  3. canvas动画循环
  4. 快速排序算法(java实现)
  5. anubis质检结果xtr文件详解
  6. 编码之路,与君共勉!
  7. 国庆长假大事记:百度地图、先锋系、火箭队
  8. 养老江湖:十年十败,一部跌宕起伏的中国养老史诗
  9. 利用Matlab编程画图的常用代码(更新中)
  10. EPIC 创建DMEEX付款结构