转盘抽奖效果练习

效果截图：

 

CSS代码：

*,body,img,a,hi,h2,table,td,tr,ul,li{
    margin:0;
    padding:0;
    border:0;
}
#gameBox{
    position:absolute;
    width:284px;
    height:284px;
    left:50%;
    top:50%;
    margin-left:-142px;
    margin-top:-142px;
}
.gameitem,.startitem{
    position:absolute;
    width:89px;
    height:89px;
    border:1px #fff188 solid;
    background:#f5da2c;
    text-align:center;
    line-height:89px;
    font-family:"微软雅黑";
    font-weight:bold;
    color:#FFF;
    font-size:16px;
}
.gameitem.item1{
    left:0;
    top:0;
}
.gameitem.item2{
    left:90px;
    top:0;
}
.gameitem.item3{
    left:180px;
    top:0
}
.gameitem.item4{
    left:180px;
    top:90px;
}
.gameitem.item5{
    left:180px;
    top:180px;
}
.gameitem.item6{
    left:90px;
    top:180px;
}
.gameitem.item7{
    left:0px;
    top:180px;
}
.gameitem.item8{
    left:0;
    top:90px;
}
#gamestart{
    left:90px;
    top:90px;
    border:0;
    background:url(statbtn.jpg) no-repeat;
    width:90px;
    height:90px;
    overflow:hidden;
}
#gamestart a{
    display:block;
    width:90px;
    height:90px;
    text-indent:-999px;
    overflow:hidden;
}

HTML代码：

<div id="gameBox">
    
        <div id="gameitem1" class="gameitem item1">感谢参与</div>
        <div id="gameitem2" class="gameitem item2">10QB</div>
        <div id="gameitem3" class="gameitem item3">感谢参与</div>
        <div id="gameitem4" class="gameitem item4">50QB</div>
        <div id="gameitem5" class="gameitem item5">感谢参与</div>
        <div id="gameitem6" class="gameitem item6">10元话费</div>
        <div id="gameitem7" class="gameitem item7">感谢参与</div>
        <div id="gameitem8" class="gameitem item8">10QB</div>
        
        <div id="gamestart" class="startitem">
            <a id="startbtn" href="javascript:;" onfocus="this.blur()" onclick="gamestart()">开始抽奖</a>
        </div>
        
    </div>

JS代码：

        var move_num=0;//用于奖品元素循环
        var speed=500;//转动速度
        var Timer;//计时器
        var html="<a id='startbtn' href='javascript:;' onfocus='this.blur()' onclick='gamestart()'>开始抽奖</a>";
        var rs;//奖品运算结果--一般在服务器端计算后返回
        function gamestart(){
            $("#gamestart").empty();
            rs=Math.floor(Math.random()*8+1);//随机的算法，不过这个是平均的概率。真正抽奖结果还是得由你来操控。
            if(move_num>=$(".gameitem").length)
            {
                move_num=0;
            }
            $(".gameitem").eq(move_num).css({"background":"#f60"});
            $(".gameitem").eq(move_num-1).css({"background":"#f5da2c"});//转动效果
            move_num++;
            speed=speed-55;//转动速度增加
            if(speed<=50)//当速度达到这个时保持
            {
                speed=50;
            }
            setTimer();
            if(speed==50)
            {
                gamestop();//执行定时器函数，3秒后停止
            }
        }
        function setTimer(){
            Timer=setTimeout(gamestart,speed);
        }
        function clearTimer(){
            if(move_num==rs)//判断元素位置等于结果时停止
            {
                clearTimeout(Timer);
                $("#gamestart").html(html);
                speed=500;
            }
        }
        function gamestop(){
            setTimeout(clearTimer,3000);
        }