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


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 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
微信小程序实现留言功能
Oct 31 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 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 curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
Python验证码识别的方法
2015/07/10 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
海量信息软件测试笔试题
2015/08/08 面试题
国庆节文艺活动方案
2014/02/03 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
2015政治思想表现评语
2015/03/25 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
好人好事新闻稿
2015/07/17 职场文书
环保建议书范文
2015/09/14 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle