<script src="js/choujiang.js" type="text/javascript" charset="utf-8"></script>
</html>
css部分：
* {
margin: 0;
padding: 0;
}
.light {
width: 100%;
height: 7.6rem;
background: #BD1D25;
padding: .2rem;
box-sizing: border-box;
font-size: .24rem;
}
.light .gift_div {
width: 100%;
height: 6.4rem;
background: #139365;
border-radius: .1rem;
position: relative;
padding: .05rem .5%;
box-sizing: border-box;
margin-top: .2rem;
}
.gift_div>div {
position: absolute;
width: 32%;
height: 2rem;
margin: .05rem .5%;
background: #E6F0EC;
border-radius: .06rem;
}
.gift2,
.gift6,
.start{
left: 33.5%;
}
.gift3,
.gift4,
.gift5{
right: .5%;
}
.gift4,
.gift8,
.start{
top: 2.15rem;
}
.gift5,
.gift6,
.gift7{
bottom: .05rem;
}
.gift_div .start{
background: #FDB827;
text-align: center;
line-height: 2rem;
color: #FF001F;
}
.red{
color: red;
}
.num{
text-align: center;
font-size: .32rem;
line-height: .6rem;
background: #E6EFEC;
border-radius: .6rem;
}
.gift_b:after{
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
content: '';
left: 0;
}js部分：
$(function() {
var speed = 150, //跑马灯速度
click = true, //阻止多次点击
img_index = -1, //阴影停在当前奖品的序号
circle = 0, //跑马灯跑了多少次
maths,//取一个随机数;
num=$('.red').text();
$('.start').click(function() {
if(click&&num>0) {
click = false;
maths = parseInt((Math.random() * 10) + 80);
light();
} else {
return false;
}
});
function light() {
img();
circle++;
var timer = setTimeout(light, speed);
if(circle > 0 && circle < 5) {
speed -= 10;
} else if(circle > 5 && circle < 20) {
speed -= 5;
} else if(circle > 50 && circle < 70) {
speed += 5
} else if(circle > 70 && circle < maths) {
speed += 10
} else if(circle == maths) {
var text = $('.gift_div .gift:eq(' + img_index + ')').text();
console.log(circle + maths, 'aaa', img_index, $('.gift_div .gift:eq(' + img_index + ')').text())
clearTimeout(timer);
setTimeout(function() {
alert('恭喜获得' + text)
}, 300)
click = true;
speed = 150;
circle = 0;
