一个简单的双转盘抽奖demo

今天遇到朋友要我给他写个双转盘抽奖功能，需要要两个转盘联动。不好推却得我只能开始动手了，图片什么的都是在网上找的。

首先抽奖这玩意的奖品控制当然是在后台啦，不然安全性就太低了。所以我选择先有抽奖结果，再转动转盘。

废话不多说，先上代码

css：

*{
            margin: 0;padding: 0;
        }
        #parent{
            position: relative;
            width: 300px;
            height: 300px;
            margin-left:200px;
        }
        #rotate{
            width: 300px;
            height: 300px;
            transition: all 3s;
        }
        #rotate>img{display:block;width:100%;height:100%;}
        #zhen{
            position: absolute;
            left: 50%;
            top: 85px;
            width: 80px;
			margin-left:-40px;
        }
        #zhen>img{display:block;width:100%;}
        .aa{
            width: 130px;
        }
        #zhuanpan_small{position:absolute;width:150px;height:150px;display:block;left:70px;top:68px;transition:all 3s;}

html：

<img src="chilun1.png" id="zhuanpan_small"/>
    <div id="parent">
        <div id="rotate"><img src="chilun3.png"></div>
        <div id="zhen"><img class="aa" src="zhizhen.png"></div>
    </div>

js为了省事引用了jq框架，实际上只用来给元素添加样式和点击事件，不喜欢的同学也可改成原生的。

$(function(){
            var bTag = 3;//剩余点击次数，这个实际应该从后台获取
            var boot_item='';//上一次抽奖的结果
            var boot_deg=0;//上次旋转角度
            $('#zhen').click(function(){
               if(bTag==0){
               	alert('没有机会了');
               }else{
               	var item =   Math.floor( Math.random()*6);//模拟本次抽奖的结果（0~5），实际应从后台获取
               	//弹框是debug模式，可自行拿掉
               	if(item==0){//米
       				alert('米');
               	}
       			if(item==1){//黄包
       				alert('黄包');
               	}
               	if(item==2){//伞
               		alert('伞');
               	}
               	if(item==3){//包
               		alert('包');
               	}
               	if(item==4){//伞
               		alert('伞');
               	}
               	if(item==5){//paid
               		alert('paid');
               	}
               	
           		if(boot_item==''){//如果是第一次旋转
           			var aa=boot_deg+1800+item*60+'deg';//要旋转的角度，每次默认先旋转5圈（360*5=1800）
           			boot_item=item;//保存本次抽奖结果
           			boot_deg=parseInt(aa);//保存本次抽奖旋转读书
           		}else{//不是第一次旋转
           			var aa=boot_deg+1800+(item-boot_item)*60+'deg';
           			boot_item=item;
           			boot_deg=parseInt(aa);
           		}
               	bTag--;//模拟剩余抽奖次数，实际应从后台获取
             }
               //开始旋转，大转盘与小转盘的旋转圈数为齿轮之比，这里大转盘的齿轮是小转盘的2倍，因此小转盘的旋转度数*2
                var cc = "rotate("+aa+")";
                var dd="rotate("+-2*parseInt(aa)+"deg)";
                console.log(cc);
                $("#rotate").css({'transform':cc})
				$("#zhuanpan_small").css({'transform':dd})

            })
        })

demo地址：点击打开链接

截图：