微信小程序實現簡單九宮格抽獎

<view id="container">
  <!--左上-->
  <view id="li" class='{{amplification_index===1?"indexli":""}}'>
    一等獎
    <view></view>
  </view>
  <!--上-->
  <view id="li" class='{{amplification_index===2?"indexli":""}}'>
    二等獎
    <view></view>
  </view>
  <!--右上-->
  <view id="li" class='{{amplification_index===3?"indexli":""}}'>
    三等獎
    <view></view>
  </view>
  <!--左-->
  <view id="li" class='{{amplification_index===8?"indexli":""}}'>
    八等獎
    <view></view>
  </view>
  <!--開始-->
  <a bindtap="startrolling">
    開始抽獎
  </a>
  <!--右-->
  <view id="li" class='{{amplification_index===4?"indexli":""}}'>
    四等獎
    <view></view>
  </view>
  <!--左下-->
  <view id="li" class='{{amplification_index===7?"indexli":""}}'>
    七等獎
    <view></view>
  </view>
  <!--下-->
  <view id="li" class='{{amplification_index===6?"indexli":""}}'>
    六等獎
    <view></view>
  </view>
  <!--右下-->
  <view id="li" class='{{amplification_index===5?"indexli":""}}'>
    五等獎
    <view></view>
  </view>
  <p id="pp"></p>
</view>

#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;}