小程序九宫格抽奖（注：基于wepy框架开发的小程序）

实现的效果如图

具体代码如下：

wxml

<view style="width:750rpx;height:100vh;">
        <view class="lpMian">
            <view class="lm_head">
                <view class="name">新会员幸运大抽奖活动</view>
                <view class="time">活动时间：2020/03/04 - 2020/05/20</view>
            </view>
            <view class="lm_tips">活动期间内注册的新会员，即可获得3次抽奖机会</view>
            <view class="lm_body">
                <view class="awardsBox">
                    <view class="ab_item jp" style="opacity:{{prizeArr[index].opa}};" wx:for="{{3}}" wx:key="index">
                        <view class="aiPic">
                            <image src="{{prizeArr[index].imgUrl}}" style="width: 100%;height: 100%;" mode="scaleToFill" />
                        </view>
                        <view class="aiTxt">谢谢参与</view>
                    </view>
                    <view class="ab_item jp" style="opacity:{{prizeArr[7].opa}};">
                        <view class="aiPic">
                            <image src="{{prizeArr[7].imgUrl}}" style="width: 100%;height: 100%;" mode="scaleToFill" />
                        </view>
                        <view class="aiTxt">谢谢参与</view>
                    </view>
                    <!-- 立即抽奖按钮 -->
                    <view class="ab_item cjBtn" @tap="onStartLottery">
                        <view class="aiPic"></view>
                        <view class="aiTxt" style="color:#FFE400;">剩余 10 次机会</view>
                    </view>
                    <view class="ab_item jp" style="opacity:{{prizeArr[3].opa}};">
                        <view class="aiPic">
                            <image src="{{prizeArr[3].imgUrl}}" style="width: 100%;height: 100%;" mode="scaleToFill" />
                        </view>
                        <view class="aiTxt">谢谢参与</view>
                    </view>
                    <view class="ab_item jp" style="opacity:{{prizeArr[index==0?6:index==1?5:4].opa}};" wx:for="{{3}}" wx:key="index">
                        <view class="aiPic">
                            <image src="{{prizeArr[index==0?6:index==1?5:4].imgUrl}}" style="width: 100%;height: 100%;" mode="scaleToFill" />
                        </view>
                        <view class="aiTxt">谢谢参与</view>
                    </view>
                </view>
            </view>
            <view class="lm_btns">
                <view>活动规则</view>
                <view>获奖记录</view>
            </view>
            <view class="lm_tips2">请在活动期间内参与抽奖，活动结束后不可再进行抽奖仅限可爱可亲母婴生活馆（广州客村店）会员参与</view>
        </view>
    </view>

js

    //可用于页面模板中绑定的数据
    data = {
        prizeArr: [
            {
            opa: 1,
            imgUrl: 'http://store.honey-lovely.com/lottery/prize.png',
            name: "笔记本电脑"
            },
            {
            opa: 1,
            imgUrl: 'http://store.honey-lovely.com/lottery/prize.png',
            name: "谢谢参与"
            },
            {
            opa: 1,
            imgUrl: 'http://store.honey-lovely.com/lottery/prize.png',
            name: "谢谢参与"
            },
            {
            opa: 1,
            imgUrl: 'http://store.honey-lovely.com/lottery/prize.png',
            name: "谢谢参与"
            },
            {
            opa: 1,
            imgUrl: 'http://store.honey-lovely.com/lottery/prize.png',
            name: "谢谢参与"
            },
            {
            opa: 1,
            imgUrl: 'http://store.honey-lovely.com/lottery/prize.png',
            name: "谢谢参与"
            },
            {
            opa: 1,
            imgUrl: 'http://store.honey-lovely.com/lottery/prize.png',
            name: "笔记本电脑"
            },
            {
            opa: 1,
            imgUrl: 'http://store.honey-lovely.com/lottery/prize.png',
            name: "笔记本电脑"
            },
        ],
        canLottery: true,   //是否可点击抽奖按钮
        winPosition: 0,    //中奖位置
        interval: '',       //定时器
        runTime: 60,        //给定时器的时间
    };

    methods = { 
        onStartLottery(){   //开始抽奖
            let vm = this;
            let { prizeArr, canLottery, winPosition, runTime } = vm.data;
            if (!canLottery) {   //不可以抽奖 
                return;
            }
            if (canLottery) {   //可以抽奖 
                vm.canLottery = false; //设置按钮为不可以点击状态
                clearInterval(vm.interval)  //清除上一个定时器
                let index = 0;
                vm.interval = setInterval(() => {
                    if (index > 7) { // 重置
                        index = 0; 
                        vm.prizeArr[7].opa = 1;
                    } else if (index != 0) {
                        vm.prizeArr[index - 1].opa = 1;   //将当前点亮奖品位置的上一个恢复正常样式
                    }
                    vm.prizeArr[index].opa = 0.6;
                    vm.$apply()
                    index++;
                }, runTime);
                setTimeout(() => {  //设置几秒之后让抽奖跑灯慢下来
                    vm.slowDown(winPosition)
                }, 2000);
            }
        } 
        
    };

    /* 减缓抽奖跑灯的移动速度 */
    slowDown(winIndex){  
        let vm = this;
        let { prizeArr, runTime } = vm.data;
        clearInterval(vm.interval)  //清除当前快速移动跑灯的定时器
        let current = 0;  
        for (var i=0; i<prizeArr.length; i++) {
            if (prizeArr[i].opa == 0.6) {
                current = i;    //当前跑灯停留的位置
            }
        }
        let next = current + 1; //开始减速的位置下标
        vm.stopLottery(winIndex, next, runTime, 10)
    }

    /* 从减速到暂停 */
    stopLottery(winIndex,next,runTime,slowTime){    
        let vm = this;
        let { prizeArr } = vm.data;
        setTimeout(() => {  //runTime值越大速度越慢
            if (next > 7) { // 重置
                next = 0; 
                vm.prizeArr[7].opa = 1;
            } else if (next != 0) {
                vm.prizeArr[next - 1].opa = 1;   //将当前点亮奖品位置的上一个恢复正常样式
            }
            vm.prizeArr[next].opa = 0.6;
            vm.$apply()
            if ( runTime < 500 || winIndex != next ) {    //当前位置不是指定要中奖的位置 且 减速时间不够
                slowTime++;
                runTime += slowTime;
                next++; //当前位置+1
                vm.stopLottery(winIndex, next, runTime, slowTime)
            } else {
                setTimeout(()=>{    //设置一秒后再提示中奖信息
                    wx.showModal({
                        title: '中奖啦',
                        content: vm.prizeArr[winIndex].name,
                        showCancel: false,
                        success: (result) => {
                            if(result.confirm){
                                vm.prizeArr[winIndex].opa = 1;
                                vm.canLottery = true; //重置按钮为可点击状态
                                vm.$apply()
                            }
                        }
                    });
                },1000)
            }
        }, runTime);
    }

    onLoad() {

    }

    /* 监听页面卸载 */ 
    onUnload() {
        clearInterval(this.interval)
    }

wxss

view{
    box-sizing: border-box;
}

.lpMian{
    width:750rpx;
    height:100%;
    background-image:url('http://store.honey-lovely.com/lottery/lotteryBg.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
    padding: 70rpx 32rpx 0rpx 32rpx;
    .lm_head{
        margin:0rpx auto;
        .name,.time{
            font-size:60rpx;
            font-weight:bold;
            color:#FFFFFF;
            text-align:center;
        }
        .time{
            font-size:30rpx;
        }
    }
    .lm_tips{
        width:686rpx;
        height:70rpx;
        line-height:70rpx;
        background:rgba(191,12,0,0.5);
        border-radius:10rpx;
        text-align:center;
        font-size:28rpx;
        color:#FFFFFF;
        margin:30rpx auto;
    }
    .lm_body{
        width:686rpx;
        height:654rpx;
        background-image:url('http://store.honey-lovely.com/lottery/awardsBg.png');
        background-size:100% 100%;
        background-repeat:no-repeat;
        padding:40rpx;
        .awardsBox{
            width:100%;
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            align-items:center;
            .ab_item{
                width:200rpx;
                height:180rpx;
                border-radius:25rpx;
                margin-bottom:5rpx;
                .aiPic{
                    width:110rpx;
                    height:110rpx;
                    margin: 12rpx auto;
                }
                .aiTxt{
                    font-size:24rpx;
                    color:#7F3E3E;
                    text-align:center;
                }
            }
            .jp{
                background:#FFEEEE;
            }
            .cjBtn{
                background-image:url('http://store.honey-lovely.com/lottery/lotteryBtn.png');
                background-size:100% 100%;
                background-repeat:no-repeat;
            }
        }
    }
    .lm_btns{
        width:670rpx;
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin:0rpx auto;
        >view{
            width:320rpx;
            height:80rpx;
            line-height:80rpx;
            text-align:center;
            font-size:38rpx;
            color:#DF2522;
            background:rgba(255,240,1,1);
            box-shadow:0rpx 7rpx 5rpx 0rpx rgba(177,55,0,0.64);
            border-radius:40rpx;
        }
    }
    .lm_tips2{
        font-size:24rpx;
        color:#FFFFFF;
        text-align:center;
        margin-top:30rpx;
    }
}