页面如下
<div id="luck">
<!-- luck -->
<div class="weui-grids">
<div class="weui-grid luck-unit luck-unit-0" ng-class="{'active': index=='0'}">
<div class="weui-grid__icon">
<img src="images/prize/6.png">
</div>
<p class="weui-grid__label">零食</p>
</div>
<div class="weui-grid luck-unit luck-unit-1" ng-class="{'active': index=='1'}">
<div class="weui-grid__icon">
<img src="images/prize/1.png">
</div>
<p class="weui-grid__label">华为 MateBook</p>
</div>
<div class="weui-grid luck-unit luck-unit-2" ng-class="{'active': index=='2'}">
<div class="weui-grid__icon">
<img src="images/prize/3.png">
</div>
<p class="weui-grid__label">空气净化器</p>
</div>
<div class="weui-grid luck-unit luck-unit-7" ng-class="{'active': index=='7'}">
<div class="weui-grid__icon">
<img src="images/prize/8.png">
</div>
<p class="weui-grid__label">谢谢参与</p>
</div>
<div class="weui-grid luck-unit-center">
<!-- <img src="images/buttonUp.png"> -->//中间
</div>
<div class="weui-grid luck-unit luck-unit-3" ng-class="{'active': index=='3'}">
<div class="weui-grid__icon">
<img src="images/prize/4.png">
</div>
<p class="weui-grid__label">定制公仔</p>
</div>
<div class="weui-grid luck-unit luck-unit-6" ng-class="{'active': index=='6'}">
<div class="weui-grid__icon">
<img src="images/prize/7.png">
</div>
<p class="weui-grid__label">10元代金劵</p>
</div>
<div class="weui-grid luck-unit luck-unit-5" ng-class="{'active': index=='5'}">
<div class="weui-grid__icon">
<img src="images/prize/2.png">
</div>
<p class="weui-grid__label">OPPOr15 手机</p>
</div>
<div class="weui-grid luck-unit luck-unit-4" ng-class="{'active': index=='4'}">
<div class="weui-grid__icon">
<img src="images/prize/5.png">
</div>
<p class="weui-grid__label">狗粮</p>
</div>
</div>
</div>
<!-- 开始按钮 -->
<div class="startDraw" ng-click="luckStart()">
<img src="images/go.png" alt="">
</div>
基本css样式如下
#luck {
width: 70%;
padding-bottom: 70%;
margin: 0 auto;
position: absolute;
top: 10%;
left: 17%;
}
#luck .weui-grids:before {
border: 0;
}
#luck .weui-grids:after {
border: 0;
}
#luck .weui-grid:after {
border: 0;
}
#luck .weui-grid:before {
border: 0;
}
.luck-unit {
background: #f9de33;
border-radius: 10px;
border: 3px solid #f85952;
text-align: center;
margin: 1%;
width: 29.77%;
/* height: 100%; */
padding: 0 1% 24.5%;
position: relative;
/* height: 103px; */
}
#luck .active {
background: #ffffff;
border: 3px solid #f9de33;
}
.luck-unit-center {
padding: 5px;
/* background: #f9de33;
border-radius: 10px;
border: 3px solid #f85952; */
text-align: center;
margin: 2px;
width: 30%;
}
.luck-unit .weui-grid__icon {
position: absolute;
width: 90%;
height: 50%;
margin: 20% auto 0 !important;
}
.luck-unit p.weui-grid__label {
position: absolute;
width: 90%;
margin: 65% auto 0 !important;
font-size: 1.1rem;
color: #e8124a;
}
image.png
// 幸运抽奖 九宫格
$scope.canDrawNum = 2; //抽奖次数
var luck = {
index: -1, //当前转动到哪个位置，起点位置
count: 0, //总共有多少个位置
timer: 0, //setTimeout的ID，用clearTimeout清除
speed: 500, //初始转动速度
times: 0, //转动次数
cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
prize: -1, //中奖位置
init: function (id) {
this.count = 8;
},
roll: function () {
var index = this.index;
var count = this.count;
var luck = this.obj;
index += 1;
if (index > count - 1) {
index = 0;
$scope.index = index;
};
this.index = index;
$scope.index = index;
// console.log($scope.index );
return false;
},
stop: function (index) {
this.prize = index;
return false;
}
};
function roll() {
luck.times += 1;
luck.roll();
if (luck.times > luck.cycle + 10 && luck.prize == luck.index) {
clearTimeout(luck.timer);
if (luck.prize == 7) { //没中奖
$('.draw-info-fail').fadeIn();
luck.prize = -1;
luck.times = 0;
click = false;
} else if (luck.prize == 3) { //四等奖
$scope.prizeName = "定制公仔一个";
$('.draw-info-win').fadeIn();
luck.prize = -1;
luck.times = 0;
click = false;
} else if (luck.prize == 0) {//五等奖
$scope.prizeName = "一份";
$('.draw-info-win').fadeIn();
luck.prize = -1;
luck.times = 0;
click = false;
} else if (luck.prize == 6) {//六等奖
$scope.prizeName = "零食一份";
$('.draw-info-win').fadeIn();
luck.prize = -1;
luck.times = 0;
click = false;
}
} else {
if (luck.times < luck.cycle) {
luck.speed -= 10;
} else if (luck.times == luck.cycle) {
// var index = Math.random() * (luck.count)| 0;
// luck.prize = index;
} else {
if (luck.times > luck.cycle + 10 &&
((luck.prize == 0 && luck.index == 7) || luck.prize == luck.index + 1)) {
luck.speed += 110;
} else {
luck.speed += 20;
}
}
if (luck.speed < 40) {
luck.speed = 40;
};
luck.timer = $timeout(roll, luck.speed);
}
return false;
}
//闪灯效果
// $scope.isBling = true;
// var num = 0;
// var timer = $interval(function () {
// num++;
// if (num % 2 == 0) {
// $scope.isBling = false;
// } else {
// $scope.isBling = true;
// }
// }, 500);
var click = false;
luck.init('luck');
$scope.luckStart = function () {
if (click) {
return false;
}
else {
$scope.isGo = false;
$scope.canDrawNum--;
luck.speed = 200;
$http({
url: serviceUrl + "/reward/draw",
method: "GET"
}).success(function (data) {
console.log(data)
if (data == 40) {
$scope.msg = "您的积分不足";
$('#dialog').fadeIn();
} else if (data == 4) {
$scope.myScore -= 100;
luck.prize = 3;
roll();
} else if (data == 5) {
$scope.myScore -= 100;
luck.prize = 0;
roll();
} else if (data == 6) {
$scope.myScore -= 100;
luck.prize = 6;
roll();
} else {
$scope.myScore -= 100;
luck.prize = 7;
roll();
}
})
click = true;
return false;
}
};
