jquery 跑馬燈抽獎

oofw5751 8年前發布 | 1K 次閱讀 JavaScript Android開發 app 上架

 

lottery.js            

/**
*@author 大灰狼 
*@email 116311316@qq.com
*@version 1.1
*/
var lottery={
     index : 1, //起點
     speed : 400, //初始速度
     roll:0, //定時器id
     cycle : 1, //已跑的圈速
     times : 4, //至少跑幾圈
     prize : -1, //中獎索引
     btn:0,
    run : function () {
        var before = lottery.index == 1 ? 10 : lottery.index - 1;
        $(".roll-" + lottery.index).addClass("active");
        $(".roll-" + before).removeClass("active");

        //初步加快的過程
        lottery.upSpeed();
        lottery.downSpeed();
        lottery.index += 1;
        lottery.index = lottery.index == 11 ? 1 : lottery.index;
    },
    //提速
    upSpeed : function () {
        if (lottery.cycle < 2 && lottery.speed > 100) {
            lottery.speed -= lottery.index * 8;
            lottery.stop();
            lottery.start();
        }
    },
    //降速
    downSpeed:function () {
        if (lottery.index == 10) {
            lottery.cycle += 1;
        }
        if (lottery.cycle > lottery.times - 1 && lottery.speed < 400) {
            lottery.speed += 20;
            lottery.stop();
            lottery.start();
        }

        if (lottery.cycle > lottery.times && lottery.index == lottery.prize) {
            lottery.stop();
            lottery.showPrize();

        }

    },
    //先停止再顯示結果 按鈕顯示出來
    showPrize:function(){

        setTimeout(function(){

            alert("price is "+lottery.prize);
                        lottery.btn.show();

        },700);
    },

    //重新開始
    reset : function () {
        lottery.btn=$(this);
        lottery.btn.hide();
        lottery.speed = 400;
        lottery.cycle = 0;
        lottery.prize = Math.round(Math.random() * 9) + 1;
        lottery.run();
    },
    start : function () {
        lottery.roll = setInterval(lottery.run, lottery.speed);
    },

    stop : function () {
        clearInterval(lottery.roll);
    }
}

roll.htm   

<html>
<head>
<script type="text/javascript" src="./jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./lottery.js"></script>

<style>
.roll{width:50px;border:1px #ccc solid;text-align:center;}
.active{border-color:red;}
</style>
</head>
<body>



<table>
<tr>
<td class="roll roll-1 active">1<td>
<td class="roll roll-2">2<td>
<td class="roll roll-3">3<td>
<td class="roll roll-4">4<td>
</tr>
<tr>
<td class="roll roll-10">10<td>
<td class="roll"><td>
<td class="roll" ><td>
<td class="roll roll-5">5<td>
</tr>
<tr>
<td class="roll roll-9">9<td>
<td class="roll roll-8">8<td>
<td class="roll roll-7">7<td>
<td class="roll roll-6">6<td>
</tr>
</table>


<button id="start">start</button>

<script>
$(document).ready(function(){
$("#start").bind('click',lottery.reset);
})

</script>
</body>
</html>

 

 本文由用戶 oofw5751 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！