！声明文档类型

html lang='en '

头

meta charset='UTF-8 '

titlehtml5制作转盘游戏/title

元名称='关键字'内容=' html5制作转盘游戏' /

元名称='描述'内容=' html5制作转盘游戏' /

meta name=' viewport ' content=' width=device-width，initial-scale=1，maximum-scale=1，user-scaled=no '

链接rel='样式表href=' CSS/KinerLottry . CSS '

风格

h1{

宽度： ;

高度： 3毫米

行高：3雷姆；

font-size : 1.8 rem

color: # c60

文本-对齐：中心；

font-weight:加粗；

}

/style

/head

身体

h1KinerLotter——大转盘/h1

div id='box' class='box '

div class=' outer kinerlotery kinerlotery content ' img src=' ./imgs/lotteryContent.png'/div

！-大专盘分为三种状态：活动未开始（不启动)、活动进行中（开始)、活动结束（已完成),可通过切换班级进行切换状态，js会根据这3个班级进行匹配状态-

div class=' inner KinerLotteryBtn start '/div

/div

脚本src=' js/zepto。量滴js '/脚本

脚本src=' js/KinerLottery。js '/脚本

脚本

/**

* 根据转盘旋转角度判断获得什么奖品

* @param deg

* @返回{*}

*/

var WHo Awards=function(deg){

if((deg 330 deg=360)| |(deg 0 deg=30)){//10M流量

"返回"三网通流量10M '；

} else if((deg 30 deg=90)){//IPhone 7

返回iphone 7 '；

}否则if(90度=150) { //30M流量

"返回"三网通流量30M '；

} else if (deg 150 deg=210) { //5元话费

"返回"话费5元；

} else if(deg 210 deg=270){//IPad mini 4

返回“ipad mini 4”；

} else if (deg 270 deg=330) { //20元话费

"返回"话费20元；

}

}

var KinerLottry=new KinerLottry({

rotateNum: 8，//转盘转动圈数

body: '#box '，//大转盘整体的选择符或仄普托对象

方向： 0,//0为顺时针转动，1为逆时针转动

disabledHandler:函数（键){

开关（键){

case 'noStart':

"警报("活动尚未开始');

打破；

案例"已完成":

"警报("活动已结束');

打破；

}

}, //禁止抽奖时回调

点击回调：函数(){

//此处访问接口获取奖品

function random() {

返回数学。地板(数学。random()* 360)；

}

这个。gokinerlotery(random())；

}, //点击抽奖按钮，再次回调中实现访问后台获取抽奖结果，拿到抽奖结果后显示抽奖画面

KinerLotteryHandler:函数(deg) {

"警报("恭喜您获得：‘什么奖(deg))；

} //抽奖结束回调

});

/script

/body

/html