<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title>html5制作转盘游戏 </title>
<meta name=
"keywords"
content=
" html5制作转盘游戏 "
/>
<meta name=
"description"
content=
" html5制作转盘游戏 "
/>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
>
<link rel=
"stylesheet"
href=
"css/kinerLottery.css"
>
<style>
h1{
width: 100%;
height: 3rem;
line-height: 3rem;
font-size: 1.8rem;
color:
#c60;
text-align: center;
font-weight: bolder;
}
</style>
</head>
<body>
<h1>KinerLotter――大转盘</h1>
<div id=
"box"
>
<div class=
"outer KinerLottery KinerLotteryContent"
><img src=
"./imgs/lotteryContent.png"
></div>
<!-- 大专盘分为三种状态:活动未开始(no-start)、活动进行中(start)、活动结束(completed),可通过切换class进行切换状态,js会根据这3个class进行匹配状态 -->
<div class=
"inner KinerLotteryBtn start"
></div>
</div>
<script src=
"js/zepto.min.js"
></script>
<script src=
"js/kinerLottery.js"
></script>
<script>
var
whichAward =
function
(deg) {
if
((deg > 330 && deg <= 360) || (deg > 0 && deg <= 30)) {
return
"三网通流量 10M"
;
}
else
if
((deg > 30 && deg <= 90)) {
return
"iPhone7"
;
}
else
if
(deg > 90 && deg <= 150) {
return
"三网通流量 30M"
;
}
else
if
(deg > 150 && deg <= 210) {
return
"话费5元"
;
}
else
if
(deg > 210 && deg <= 270) {
return
"ipad mini4"
;
}
else
if
(deg > 270 && deg <= 330) {
return
"话费20元"
;
}
}
var
KinerLottery =
new
KinerLottery({
rotateNum: 8,
body:
"#box"
,
direction: 0,
disabledHandler:
function
(key) {
switch
(key) {
case
"noStart"
:
alert(
"活动尚未开始"
);
break
;
case
"completed"
:
alert(
"活动已结束"
);
break
;
}
},
clickCallback:
function
() {
function
random() {
return
Math.floor(Math.random() * 360);
}
this
.goKinerLottery(random());
},
KinerLotteryHandler:
function
(deg) {
alert(
"恭喜您获得:"
+ whichAward(deg));
}
});
</script>
</body>
</html>