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


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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
js切换div css注意的细节
Dec 10 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 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
phpmyadmin的#1251问题
2006/11/25 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
javascript 动态添加表格行
2006/06/22 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
python编程使用协程并发的优缺点
2018/09/20 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
Python打印不合法的文件名
2020/07/31 Python
python raise的基本使用
2020/09/10 Python
python 利用toapi库自动生成api
2020/10/19 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
2014年医学生毕业自我鉴定
2014/03/26 职场文书
励志演讲稿范文
2014/04/29 职场文书
给校长的建议书100字
2014/05/16 职场文书
停车场管理协议书范本
2014/10/08 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
护士求职自荐信范文
2015/03/04 职场文书
校运会宣传稿大全
2015/07/23 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript