<view id="container">
? <!--左上-->
? <view id="li" class='{{amplification_index===1?"indexli":""}}'>
? ? 一等獎(jiǎng)
? ? <view></view>
? </view>
? <!--上-->
? <view id="li" class='{{amplification_index===2?"indexli":""}}'>
? ? 二等獎(jiǎng)
? ? <view></view>
? </view>
? <!--右上-->
? <view id="li" class='{{amplification_index===3?"indexli":""}}'>
? ? 三等獎(jiǎng)
? ? <view></view>
? </view>
? <!--左-->
? <view id="li" class='{{amplification_index===8?"indexli":""}}'>
? ? 八等獎(jiǎng)
? ? <view></view>
? </view>
? <!--開(kāi)始-->
? <a bindtap="startrolling">
? ? 開(kāi)始抽獎(jiǎng)
? </a>
? <!--右-->
? <view id="li" class='{{amplification_index===4?"indexli":""}}'>
? ? 四等獎(jiǎng)
? ? <view></view>
? </view>
? <!--左下-->
? <view id="li" class='{{amplification_index===7?"indexli":""}}'>
? ? 七等獎(jiǎng)
? ? <view></view>
? </view>
? <!--下-->
? <view id="li" class='{{amplification_index===6?"indexli":""}}'>
? ? 六等獎(jiǎng)
? ? <view></view>
? </view>
? <!--右下-->
? <view id="li" class='{{amplification_index===5?"indexli":""}}'>
? ? 五等獎(jiǎng)
? ? <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,//上一回滾動(dòng)的位置
? ? amplification_index: 0,//輪盤(pán)的當(dāng)前滾動(dòng)位置
? ? roll_flag: true,//是否允許滾動(dòng)
? ? max_number: 8,//輪盤(pán)的全部數(shù)量
? ? speed: 300,//速度，速度值越大，則越慢 初始化為300
? ? finalindex: 5,//最終的獎(jiǎng)勵(lì)距離當(dāng)前的位置！不是最后的幾等獎(jiǎng)！
? ? myInterval: "",//定時(shí)器
? ? max_speed: 40,//滾盤(pán)的最大速度
? ? minturns: 8,//最小的圈數(shù)為2
? ? runs_now: 0//當(dāng)前已跑步數(shù)
? },
? //開(kāi)始滾動(dòng)
? startrolling: function () {
? ? let _this = this;
? ? //初始化步數(shù)
? ? _this.data.runs_now = 0;
? ? //當(dāng)前可以點(diǎn)擊的狀態(tài)下
? ? if (_this.data.roll_flag) {
? ? ? _this.data.roll_flag = false;
? ? ? //啟動(dòng)滾盤(pán)，注，若是最終后臺(tái)無(wú)返回就不好意思里
? ? ? _this.rolling();
? ? }
? },
? onShow: function () {
? ? this.data.min_height = getApp().globalData.windowheight;
? ? this.setData(this.data);
? },
? //滾動(dòng)輪盤(pán)的動(dòng)畫(huà)效果
? rolling: function (amplification_index) {
? ? var _this = this;
? ? this.data.myInterval = setTimeout(function () { _this.rolling(); }, this.data.speed);
? ? this.data.runs_now++;//已經(jīng)跑步數(shù)加一
? ? this.data.amplification_index++;//當(dāng)前的加一
? ? //獲取總步數(shù)，接口延遲問(wèn)題，所以最后還是設(shè)置成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；
? ? ? }
? ? }
? ? //抽獎(jiǎng)結(jié)束
? ? 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;
? ? }
? ? //緩沖區(qū)間
? ? else {
? ? ? this.data.speed += 10;
? ? ? if (this.data.speed >= 100) {
? ? ? ? this.data.speed = 100;//最低速度為100；
? ? ? }
? ? }
? ? if (this.data.amplification_index > this.data.max_number) {//判定！是否大于最大數(shù)
? ? ? 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;}