先上效果图：

抽奖大转盘 html5 抽奖大转盘制作_抽奖大转盘 html5

点击抽奖的时候，轮盘会转，圈数及时间自己设定，一共是两张图片，一个是奖品背景，一个是抽奖按钮。

html页面结构：

<div class="wrapper">
         <div class="box">
             <img src="./img/pan.png" alt="">
         </div>
         <div id="button">
             <img src="./img/btn.png" alt="">
         </div>

css结构：

*{
    margin:0;
    padding:0;
}
.wrapper{
    position:relative;
    width:400px;
    height:400px;
    margin:100px auto;
}
.wrapper .box{
    width: 100%;
    height: 100%;
}
.wrapper .box img{
    width: 100%;
}
.wrapper #button{
    width:130px;
    height:130px;
    position:absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin-top: -65px;
    margin-left: -65px;
}
.wrapper #button img{
    position: absolute;
    top:-23px;
    width:130px;}

接下来是最主要的js部分，先说一下思路。

写法主要是模仿的jquery源码去写的，首先先来个立即执行函数，保证封闭作用域，将需要漏给外部需要引用的部分添加到window的属性中 。创建一个构造函数，将构造函数暴露到window对象中，用于后续调用。win接收window对象，$符号接收jquery$运算符。

(function(win , $){
 win.Lottery = Lottery;
 function Lottery(){
 }})(window , $)

思考 ：转盘实现的过程，首先我们要知道点击的元素，点击按钮会触发大背景旋转，旋转结束之后会停留到某个奖项中，我们需要对几等奖做一个回调函数。如此我们的构造函数基本的对象已经可以出来了。

(function(win , $){
 var defaultPar = {
 rotate : 5 ,   // 旋转的圈数
 body : 'body' ,  / / 默认的元素
 clickCb : function(){},  / / 点击触发的事件
 randerCb : function(){} // 旋转结束的回调
 }
 win.Lottery = Lottery;
 function Lottery(pars){
 this.pars = $.extend(true, {},defaultPar , pars); // 如果传值则覆盖原默认值，不传则用默认值。
 }})(window , $)

下面我们开始写构造函数的初始函数，我们需要为按钮添加点击事件，并且点击后会触发clickCb事件，及动画执行后的操作。并且我们需要有一个动画执行过程的函数，用于控制动画的显示效果。

(function(win , $){
 var defaultPar = {
 rotate : 5 ,
 body : 'body' ,
 clickCb : function(){},
 randerCb : function(){}
 }
 win.Lottery = Lottery;
 function Lottery(pars){
 this.pars = $.extend(true, {},defaultPar , pars);
 this.isDoing = false;  //  开关，用于控制点击按钮之后不可重复点击
 this.init();     // 初始化函数
 }
 Lottery.prototype.init = function(){
 var $this = this;    // 保留当前this 当前this指向Lottery对象
 $(this.pars.body).on("click" , "#button" ,function(){ // 为按钮添加点击事件
 if(!$this.isDoing){     
 $this.isDoing = true;  // 如果已经点击一次，将开关闭合
 $this.pars.clickCb();    // 执行clickCb() 点击的函数操作。
 }
 })
 $(this.pars.body).find(".box").on("transitionend",function(){   // 动画旋转结束之后的操作
 var deg = parseInt($($this.pars.body).attr("data-deg"));   // 取出旋转的角度
 $($this.pars.body).find(".box").css({
 transform : "rotate("+ deg +"deg)",    // 将旋转的角度重置
 transition : "none"                //重置回去，但是用户不可见
 })
 $this.isDoing = false;                //动画结束，开关开启
 $this.pars.randerCb(deg);        // 动画结束执行回调函数
 }) }
        Lottery.prototype.goRotate = function(deg){    //接收旋转的角度
 $(this.pars.body).attr("data-deg",deg);        //    设置接收到的旋转角度，用于动画结束后重置
 var rotateEnd = this.pars.rotateNum * 360 + deg;    //需要旋转的角度，圈数乘以360度加上设置的角度
 $(this.pars.body).find(".box").css({
 transform : "rotate("+ rotateEnd +"deg)",        //旋转动画的样式。
 transition : "all 5s"
 })
 } 
  

})(window , $)


至此我们插件所需要的功能都有了，那么现在开始调用 。

var pars = {            // 传的参数，不传的话会用默认值，也就是defaultPar对象
 rotateNum : "10",
 body : ".wrapper",
 clickCb : clickCbFun,
 randerCb : randerCbFun
}
var lottery = new Lottery(pars);  // 创建新对象继承构造函数属性方法。


function clickCbFun(){            //点击事件所走的函数。
 var deg = Math.floor(Math.random() * 360);    //设置所以的角度，360度随机取整
 lottery.goRotate(deg);                        //执行动画操作，将设置的随机度数以参数传递。
}
function randerCbFun(deg){                    //动画执行之后的回调函数，deg为旋转的角度，用来判断奖项
 var str = "";
 if(deg >= 0 && deg < 45){
 str = "二等奖";
 }else if(deg >=90 && deg<135 || deg >= 270 && deg <315 ){
 str = "三等奖";
 }else if(deg >=180 && deg < 225){
 str = "一等奖";
 }else{
 str = "四等奖";
 } console.log("恭喜你获得：" + str);
}


本来打算好好写一写逻辑及思路的，弄一半就烦了，哈哈，以上全部功能都实现了，如果想加一些概率，可以在旋转动画goRotate中去判断设置的角度，然后让旋转角度+45，或者加多少都行，自己去控制吧，记得动画结束之后重置就可以了，如果对文中有不懂的地方可以留言，我看到的话会第一时间回复。