微信小程序实现简单九宫格抽奖

           一等奖                   二等奖                   三等奖                   八等奖                   开始抽奖              四等奖                   七等奖                   六等奖                   五等奖           

#container {   width: 750rpx;   height: 750rpx; }   #li, a {   background: #fff;   margin: 20rpx;   border: 1px solid #000000;   width: 210rpx;   height: 210rpx;   box-sizing: border-box;   display: block;   float: left;   text-align: center;   line-height: 100px;   position: relative;   border-radius: 5rpx; }   a:hover {   cursor: pointer;   color: orange;   font-size: 18px; }   .active {   background: red;   color: #fff; }   #pp {   line-height: 32px;   color: #9a9a9a;   text-align: center; }   page view .indexli {   width: 210rpx;   height: 210rpx;   margin-top: 0rpx;   margin-left: 0rpx;   margin-bottom: 0rpx;   margin-right: 0rpx;   box-sizing: border-box; }   .indexli view {   position: absolute;   width: 190rpx;   height: 190rpx;   background: #000000;   opacity: 0.3;   left: 0;   top: 0;   border:10rpx solid blue; }   a {   position: relative; }   a image {   width: 100%;   height: 100%;   border-radius: 5rpx; }   a view {   width: 80rpx;   height: 80rpx;   position: absolute;   font-size: 40rpx;   color: #fff;   font-weight: 700;   line-height: 40rpx;   margin-left: -40rpx;   margin-top: -40rpx;   left: 50%;   top: 50%;   }   .c_title {   width: 100%;   text-align: center;   color: #fff;   font-size: 20rpx;   padding-top: 30rpx; }   .c_title2 {   color: #fff;   text-align: center;   font-size: 40rpx; }   .c_title3 {   background: red;   width: 250rpx;   margin-left: 250rpx;   height: 40rpx;   line-height: 40rpx;   color: #fff;   font-size: 20rpx;   text-align: center; }   .c_titlr4 {   background: gold;   color: red;   width: 400rpx;   border-radius: 500rpx;   text-align: center;   font-size: 20rpx;   margin-left: 175rpx;   margin-top: 10rpx; }   .b1 {   margin-left: 20rpx;

// pages/Lottery/Lottery.js Page({   data: {     last_index: 0,//上一回滚动的位置     amplification_index: 0,//轮盘的当前滚动位置     roll_flag: true,//是否允许滚动     max_number: 8,//轮盘的全部数量     speed: 300,//速度，速度值越大，则越慢 初始化为300     finalindex: 5,//最终的奖励距离当前的位置！不是最后的几等奖！     myInterval: "",//定时器     max_speed: 40,//滚盘的最大速度     minturns: 8,//最小的圈数为2     runs_now: 0//当前已跑步数   },   //开始滚动   startrolling: function () {     let _this = this;     //初始化步数     _this.data.runs_now = 0;     //当前可以点击的状态下     if (_this.data.roll_flag) {       _this.data.roll_flag = false;       //启动滚盘，注，若是最终后台无返回就不好意思里       _this.rolling();     }   },   onShow: function () {     this.data.min_height = getApp().globalData.windowheight;     this.setData(this.data);   },   //滚动轮盘的动画效果   rolling: function (amplification_index) {     var _this = this;     this.data.myInterval = setTimeout(function () { _this.rolling(); }, this.data.speed);     this.data.runs_now++;//已经跑步数加一     this.data.amplification_index++;//当前的加一     //获取总步数，接口延迟问题，所以最后还是设置成1s以上     var count_num = this.data.minturns * this.data.max_number + this.data.finalindex - this.data.last_index;     //上升期间     if (this.data.runs_now <= (count_num / 3) * 2) {       this.data.speed -= 30;//加速       if (this.data.speed <= this.data.max_speed) {         this.data.speed = this.data.max_speed;//最高速度为40；       }     }     //抽奖结束     else if (this.data.runs_now >= count_num) {       clearInterval(this.data.myInterval);       this.data.roll_flag = true;     }     //下降期间     else if (count_num - this.data.runs_now <= 10) {       this.data.speed += 20;     }     //缓冲区间     else {       this.data.speed += 10;       if (this.data.speed >= 100) {         this.data.speed = 100;//最低速度为100；       }     }     if (this.data.amplification_index > this.data.max_number) {//判定！是否大于最大数       this.data.amplification_index = 1;     }     this.setData(this.data);     } })

color: #fff; font-size: 40rpx;} .b2 { margin-left: 20rpx; color: #fff; font-size: 25rpx;} .b3 { margin-left: 20rpx; color: #fff; font-size: 25rpx;} .b4 { margin-left: 20rpx; color: #fff; font-size: 25rpx;} .b5 { margin-left: 20rpx; color: #fff; font-size: 25rpx;}