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


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 相关文章推荐
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 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
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
js 金额文本框实现代码
2012/02/14 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
Python中的True,False条件判断实例分析
2015/01/12 Python
使用Python的PEAK来适配协议的教程
2015/04/14 Python
python字典的常用操作方法小结
2016/05/16 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
flask框架路由常用定义方式总结
2019/07/23 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
详解KMP算法以及python如何实现
2020/09/18 Python
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
拓展培训心得体会
2014/01/04 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
大学生应聘求职信
2014/05/26 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
自我查摆剖析材料
2014/10/11 职场文书
入股合作协议书
2014/10/12 职场文书
艺术节开幕词
2015/01/28 职场文书
2015年外联部工作总结
2015/04/03 职场文书
送达通知书
2015/04/25 职场文书
居住证明范文
2015/06/17 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js