轉盤抽獎效果練習

效果截圖：

 

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);
        }