进入界面后2s开始旋转抽奖,3s后停止,效果图：
实现代码：
<!DOCTYPE html>
<
html
lang=
"
en
">
<
head>
<
meta
charset=
"
UTF-8
">
<
meta
name=
"
viewport
"
content=
"
width=device-width, initial-scale=1.0
">
<
meta
http-equiv=
"
X-UA-Compatible
"
content=
"
ie=edge
">
<
title>Document</
title>
<
script
src=
"
./dist/js/zepto.min.js
"></
script>
<
style>
section {
position
:
relative;
width
:
100
%;
}
.one {
width
:
100
%;
}
.two {
position
:
absolute;
left
:
0;
top
:
0;
width
:
100
%;
}
/* 通过添加类名的方式来旋转 */
.two.jl200 {
/* 转35deg就抽到200元,让它转十圈+3600deg */
transform
:
rotate(
3635
deg);
transition
:
all
3
s;
}
.two.jl100 {
transform
:
rotate(
3683
deg);
transition
:
all
3
s;
}
.two.jl50 {
transform
:
rotate(
3745
deg);
transition
:
all
3
s;
}
.two.jl20 {
transform
:
rotate(
3818
deg);
transition
:
all
3
s;
}
.two.jl10 {
transform
:
rotate(
3904
deg);
transition
:
all
3
s;
}
.two.jl500 {
transform
:
rotate(
3600
deg);
transition
:
all
3
s;
}
</
style>
<
script>
$(
function () {
// 生成一个随机数1~100
var num
=
Math.
floor(
Math.
random()
*
100);
// 定义一个字符串,也就是要添加的类名
var str
=
'';
// 计算概率
if (num
<=
50) {
// num<=50表示有50%的概率抽到10元
str
=
'
jl10
'
}
else
if (num
<
71 ) {
// num->51~70,概率为20%
str
=
'
jl20
'
}
else
if (num
<
86) {
str
=
'
jl50
'
}
else
if (num
<
95) {
str
=
'
jl100
'
}
else
if (num
<
99) {
str
=
'
jl200
'
}
else
if(num
<=
100){
str
=
'
jl500
'
}
setTimeout(
function () {
// 页面加载2s后.添加类名,开始抽奖
$(
'
.two
').
addClass(str);
},
2000)
})
</
script>
</
head>
<
body>
<
section>
<
img
class=
"
one
"
src=
"
./img/01.png
"
alt=
"">
<
img
class=
"
two
"
src=
"
./img/02.png
"
alt=
"">
</
section>
</
body>
</
html>