微信小程序实现多宫格抽奖活动


Posted in Javascript onApril 15, 2020

最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢

首先看效果:

微信小程序实现多宫格抽奖活动

思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然后产生运动快慢的效果

好了,上代码

首先是WXML(这里面的判断可能有些绕,仔细按顺序看,因其第五个和第十一个格子在不同手机屏幕大小上的显示有问题,所以再次给它们判断了一下)

<view class="box">
 <view class="boxsub {{luckynum==index?'luck':''}}" wx:for='{{box}}' style="{{index>0&&index<4?'top:0;left:'+index*140+'rpx;':(index>3&&index<8?'right:0;top:'+((index-4)*100)+'rpx;':(index>7&&index<12?'bottom:0;right:'+(index-7)*140+'rpx;':(index>11&&index<14?'left:0;bottom:'+(index-11)*100+'rpx;':'')))}} {{index=='4'?'top:0;':''}} {{index=='11'?'left:0;':''}} " wx:key=''>
  <text class='boxcontent' style='{{item.name.length>6?"line-height:40rpx;margin-top:10rpx;":"line-height:100rpx;"}}'>{{item.name}}</text> 
 
 </view>
 <view class="lucky" catchtap="luckyTap">
 <text class="taplucky">点击抽奖</text>
 <text class="howMany">您还有<text class="howMany_num" >{{howManyNum}}</text>次抽奖机会</text>
 </view>
</view>
<view class="explain">

</view>

WXSS:

.box{
 margin:20rpx 25rpx;
 height: 400rpx;
 width: 698rpx;
 /*border:1px solid #ddd;*/
 position: relative;
 /*box-sizing: border-box;*/
}
.boxsub{
 width: 140rpx;
 height: 100rpx;
 /*border: 1px solid #f00;*/
 box-sizing: border-box;
 position: absolute;
 background: #ff6100;
 border: 1rpx solid #fff;
 
}
.boxcontent{
 text-align: center;
 font-size: 26rpx;
 display: block;
 color: #fff;
}
.lucky{
 width: 300rpx;
 height:130rpx;
 background:#ff6100;/* #ff6100;007FFF*/
 position: absolute;
 left: 0;
 bottom: 0;
 right: 0;
 top: 0rpx;
 margin: auto;
}

.lucky:active{
 opacity: 0.7;
}
.taplucky{
 display: block;
 text-align: center;
 font-size: 30rpx;
 line-height: 50rpx;
 height: 50rpx;
 color: #fff;
 margin-top: 20rpx;
}
.howMany{
 display: block;
 text-align: center;
 font-size: 26rpx;
 color: #fff;
 line-height: 40rpx;
 height: 40rpx;
}
.howMany_num{
 color:#007FFF;
 font-size:32rpx;
 line-height:40rpx;
 padding:0 10rpx;
}
.luck{
 opacity: 0.5;
 background: #ff6100;
}

JS

var time = null;//setTimeout的ID,用clearTimeout清除
Page({
 data: {
 box: [{
 name:'100积分'
 }, {
 name: '10元优惠券\n满100可用'
 }, {
 name: '60积分'
 }, {
 name: '30积分'
 }, {
 name: '50积分'
 }, {
 name: '30元优惠券\n满120可用'
 }, {
 name: '100积分'
 }, {
 name: '200积分'
 }, {
 name: '10积分'
 }, {
 name: '50积分'
 }, {
 name: '40积分'
 }, {
 name: '50优惠券满500可用'
 }, {
 name: '60积分'
 }, {
 name: '70积分'
 }],
 luckynum:0,//当前运动到的位置,在界面渲染
 howManyNum:10,//抽奖的剩余次数
 content:{
 index: 0, //当前转动到哪个位置,起点位置
 count: 0, //总共有多少个位置
 speed: 50, //初始转动速度
 cycle: 3*14, //转动基本次数:即至少需要转动多少次再进入抽奖环节,这里设置的是转动三次后进入抽奖环节
 },
 prize:0,//中奖的位置
 luckytapif:true//判断现在是否可以点击
 },
 //点击抽奖
 luckyTap:function(){
 var i=0,
 that=this,
 howManyNum = this.data.howManyNum,//剩余的抽奖次数
 luckytapif = this.data.luckytapif,//获取现在处于的状态
 luckynum = this.data.luckynum,//当前所在的格子
 prize =Math.floor(Math.random()*14) ;//中奖序号,随机生成
 if (luckytapif && howManyNum>0){//当没有处于抽奖状态且剩余的抽奖次数大于零,则可以进行抽奖
 console.log('prize:'+prize);
 this.data.content.count=this.data.box.length;
 this.setData({
 howManyNum:howManyNum-1//更新抽奖次数
 });
 this.data.luckytapif=false;//设置为抽奖状态
 this.data.prize = prize;//中奖的序号
 this.roll();//运行抽奖函数
 } else if (howManyNum == 0 && luckytapif){
 wx.showModal({
 title: '',
 content: '您的抽奖次数已经没有了',
 showCancel:false
 })
 }
 },
//抽奖
 roll:function(){
 var content=this.data.content,
 prize = this.data.prize,//中奖序号
 that=this;
 if (content.cycle - (content.count-prize)>0){//最后一轮的时间进行抽奖
 content.index++;
 content.cycle--;
 this.setData({
 luckynum: content.index%14 //当前应该反映在界面上的位置
 });
 setTimeout(this.roll, content.speed);//继续运行抽奖函数
 }else{
 if (content.index < (content.count*3 + prize)){//判断是否停止

 content.index++; 
 content.speed += (550 /14);//最后一轮的速度,匀加速,最后停下时的速度为550+50
 this.data.content=content;
 this.setData({
  luckynum: content.index % 14
 });
 console.log(content.index, content.speed);//打印当前的步数和当前的速度
 setTimeout(this.roll,content.speed);
 }else{
 //完成抽奖,初始化数据
 console.log('完成');
 content.index =0;
 content.cycle = 3 * 14;
 content.speed = 50;
 this.data.luckytapif = true;
 clearTimeout(time);
 wx.showModal({
  title: '',
  content: '恭喜你抽到了'+that.data.box[prize].name,
  showCancel:false
 })
 }
 }
 },
 onLoad: function (options) {
 
 },
 onReady: function () {
 
 },
 onShow: function () {
 
 },
 onHide: function () {
 
 },
 onUnload: function () {
 
 }
})

完结。

想要学习更多关于抽奖功能的实现,请参考此专题:抽奖功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实用代码片段集合
Aug 12 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
JSON 数据格式详解
Sep 13 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
十分钟带你快速了解React16新特性
Nov 10 #Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 #Javascript
Three.js加载外部模型的教程详解
Nov 10 #Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 #Javascript
three.js加载obj模型的实例代码
Nov 10 #Javascript
vue router-link传参以及参数的使用实例
Nov 10 #Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 #Javascript
You might like
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
解析argc argv在php中的应用
2013/06/24 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
token 机制和实现方式
2020/12/15 Javascript
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
python实现按关键字筛选日志文件
2019/12/24 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
大专应届生个人简历的自我评价
2013/10/15 职场文书
爱心捐书活动总结
2014/07/05 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
机械操作工岗位职责
2014/08/08 职场文书
相亲活动方案
2014/08/26 职场文书