jquery轉盤抽獎的研究

時間 2019-11-13
原文原文鏈接
先看效果：html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>轉盤抽獎二</title>
    <style>
        *{margin:0;padding: 0;}
        #lottery{width:570px;height:510px;margin:0px auto;border:4px solid #ba1809;}
        #lottery table{background-color:yellow;}
        #lottery table td{position:relative;width:190px;height:170px;text-align:center;color:#333;font-index:-999}
        #lottery table td img{display:block;width:190px;height:170px;}
        #lottery table td a{width:190px;height:170px;display:block;text-decoration:none;background:url('./img/lottery1.jpg') no-repeat top center;}
        #lottery table td a:hover{background-image:url('./img/lottery2.jpg');}
        #lottery table td.active .mask{display:block;}
        .mask{width:100%;height:100%;position:absolute;left:0;top:0;background-color: rgba(252,211,4,0.5); display:none; }
    </style>
</head>
<body>
<div id="lottery">
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td class="lottery-unit lottery-unit-0"><img src="./img/gift0.jpg"><div class="mask"></div></td>
            <td class="lottery-unit lottery-unit-1"><img src="./img/gift1.jpg"><div class="mask"></div></td>
            <td class="lottery-unit lottery-unit-2"><img src="./img/gift2.jpg"><div class="mask"></div></td>
        </tr>
        <tr>
            <td class="lottery-unit lottery-unit-7"><img src="./img/gift7.jpg"><div class="mask"></div></td>
            <td><a href="#"></a></td>
            <td class="lottery-unit lottery-unit-3"><img src="./img/gift3.jpg"><div class="mask"></div></td>
        </tr>
        <tr>
            <td class="lottery-unit lottery-unit-6"><img src="./img/gift6.jpg"><div class="mask"></div></td>
            <td class="lottery-unit lottery-unit-5"><img src="./img/gift5.jpg"><div class="mask"></div></td>
            <td class="lottery-unit lottery-unit-4"><img src="./img/gift4.jpg"><div class="mask"></div></td>
        </tr>
    </table>
</div>
<script src="../js/jquery.1.10.0.js"></script>
<script>
    $(function () {
        var lottery = {
            index: -1,    //當前轉動到哪一個位置，起點位置
            count: 0,    //總共有多少個位置
            timer: 0,    //setTimeout的ID，用clearTimeout清除
            speed: 20,    //初始轉動速度
            times: 0,    //轉動次數
            cycle: 50,    //轉動基本次數：即至少須要轉動多少次再進入抽獎環節
            prize: -1,    //中獎位置
            init: function (id) { //對象的入口方法
                //節點檢測
                if ($("#" + id).find(".lottery-unit").length > 0) {
                    $lottery = $("#" + id); //抽獎轉盤節點ID
                    $units = $lottery.find(".lottery-unit"); //獎品節點
                    this.obj = $lottery;  //把抽獎轉盤節點對象賦值給lottery對象的obj屬性
                    this.count = $units.length; //把獎品節點的長度賦值給lottery的count屬性
                    $lottery.find(".lottery-unit-" + this.index).addClass("active");    //給轉盤當前位置添加當前狀態
                };
            },
            roll: function () { //轉盤轉動的方法
                var index = this.index; //當前轉動到的位置
                var count = this.count; //位置總數
                var lottery = this.obj; //抽獎轉盤的節點
                $(lottery).find(".lottery-unit-" + index).removeClass("active"); //每次轉動前，先把當前的選擇狀態刪除
                index += 1; //將轉動到的位置增長1
                if (index > count - 1) {    //判斷若是當前轉動到的位置大於獎品節點總長度-1，則讓當前轉動到的位置重置爲0;
                    index = 0;
                };
                $(lottery).find(".lottery-unit-" + index).addClass("active");   //而後給當前轉動到的位置添加當前狀態
                this.index = index; //把當前轉動到的位置賦值給lottery對象的index屬性
                return false; //返回false,終止程序
            },
            stop: function (index) {    //中止轉動，返回中獎位置
                this.prize = index;
                return false;   //返回false,終止程序
            }
        };

        //定義一個轉動的方法roll()
        function roll() {
            lottery.times += 1; //調用lottery對象的times屬性而且在每次調用時加1
            lottery.roll();//轉動過程調用的是lottery的roll方法，這裏是第一次調用初始化
            //判斷，若是轉動次數大於轉動基本次數加10（轉動多少次後進入抽獎）而且中獎位置等於當前轉動的位置的時候
            if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
                clearTimeout(lottery.timer); //清除轉動的定時器
                lottery.prize = -1; //重置prize屬性爲-1
                lottery.times = 0;  //重置轉動次數times爲0
                click = false;  //重置變量click爲false;ps:click變量用來在點擊抽獎後不能在點擊抽獎按鈕，防止形成定時器疊加
            } else {
                //不然，即轉動次數times<=轉動基本次數時而且中獎位置和當前轉動位置不相等的時候

                //判斷若是轉動次數小於轉動基本數的時候
                if (lottery.times < lottery.cycle) {
                    //讓轉動速度減小10並從新賦值給屬性speed
                    lottery.speed -= 10;

                    //不然若是，轉動次數等於轉動基本數的時候
                } else if (lottery.times == lottery.cycle) {

                    //轉動基本數等於轉動次數後產生抽獎結果
                    //經過一個隨機數生成，把隨機數賦值給新聲明的變量index
                    var index = Math.random() * (lottery.count) | 0; //中獎物品經過一個隨機數生成
                    lottery.prize = index; //把中間物品賦值給lottery對象的prize屬性
                } else {
                    //不然即轉動次數大於轉動基本數的時候

                    if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
                        lottery.speed += 110;
                    } else {
                        lottery.speed += 20;
                    }
                }
                if (lottery.speed < 40) {
                    lottery.speed = 40;
                };

                lottery.timer = setTimeout(roll, lottery.speed);//循環調用
            };
            return false;
        };
        //方法調用
        var click = false;
        lottery.init('lottery');
        $("#lottery a").click(function () {
            if (click) {//click控制一次抽獎過程當中不能重複點擊抽獎按鈕，後面的點擊不響應
                return false;
            } else {
                lottery.speed = 100;
                roll();    //轉圈過程不響應click事件，會將click置爲false
                click = true; //一次抽獎完成後，設置click爲true，可繼續抽獎
                return false;
            };
        });
    });
</script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。