jq九宮格抽獎

時間 2019-11-22
原文原文鏈接
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery九宮格抽獎</title>
<style type="text/css">
* { margin: 0; padding: 0; }
table { border-spacing: 0; border-collapse: collapse; text-align: center; }
.draw { width: 460px; height: 470px; margin: 0 auto; padding: 40px; background-image: url(images/bg.png);}
.draw .item { width: 150px; height: 150px; background-image: url(images/bg1.png); }
.draw .item.active { background-image: url(images/bg2.png); }
.draw .img { display: table-cell; width: 150px; height: 61px; vertical-align: middle; text-align: center; }
.draw .img img { vertical-align: top; }
.draw .gap { width: 5px; }
.draw .gap-2 { height: 5px; }
.draw .name { display: block; margin-top: 10px; font-size: 14px; }
.draw .draw-btn { display: block; height: 150px; line-height: 150px; border-radius: 20px; font-size: 25px; font-weight: 700; color: #f0ff00; background-color: #fe4135; text-decoration: none; }
.draw .draw-btn:hover { background-color: #fe8d85; }
</style>
</head>

<body>

<div class="draw" id="lottery">
    <table>
        <tr>
            <td class="item lottery-unit lottery-unit-0">
                <div class="img">
                    <img src="images/img1.png" alt="">
                </div>
                <span class="name">虛擬主機 1元/年</span>
            </td>
            <td class="gap"></td>
            <td class="item lottery-unit lottery-unit-1">
                <div class="img">
                    <img src="images/img2.png" alt="">
                </div>
                <span class="name">VPS 1元/30天</span>
            </td>
            <td class="gap"></td>
            <td class="item lottery-unit lottery-unit-2">
                <div class="img">
                    <img src="images/img3.png" alt="">
                </div>
                <span class="name">.top域名 1元/年</span>
            </td>
        </tr>
        <tr>
            <td class="gap-2" colspan="5"></td>
        </tr>
        <tr>
            <td class="item lottery-unit lottery-unit-7">
                <div class="img">
                    <img src="images/img4.png" alt="">
                </div>
                <span class="name">免費主機1年</span>
            </td>
            <td class="gap"></td>
            <td class=""><a class="draw-btn" href="javascript:">當即抽獎</a></td>
            <td class="gap"></td>
            <td class="item lottery-unit lottery-unit-3">
                <div class="img">
                    <img src="images/img5.png" alt="">
                </div>
                <span class="name">.com域名 19元/年</span>
            </td>
        </tr>
        <tr>
            <td class="gap-2" colspan="5"></td>
        </tr>
        <tr>
            <td class="item lottery-unit lottery-unit-6">
                <div class="img">
                    <img src="images/img7.png" alt="">
                </div>
                <span class="name">.com域名 19元/年</span>
            </td>
            <td class="gap"></td>
            <td class="item lottery-unit lottery-unit-5">
                <div class="img">
                    <img src="images/img6.png" alt="">
                </div>
                <span class="name">CDN加速 10元/15天</span>
            </td>
            <td class="gap"></td>
            <td class="item lottery-unit lottery-unit-4">
                <div class="img">
                    <img src="images/img8.png" alt="">
                </div>
                <span class="name">20元快雲幣</span>
            </td>
        </tr>
    </table>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
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);
            $units = $lottery.find('.lottery-unit');
            this.obj = $lottery;
            this.count = $units.length;
            $lottery.find('.lottery-unit.lottery-unit-' + this.index).addClass('active');
        };
    },
    roll: function() {
        var index = this.index;
        var count = this.count;
        var lottery = this.obj;
        $(lottery).find('.lottery-unit.lottery-unit-' + index).removeClass('active');
        index += 1;
        if (index > count - 1) {
            index = 0;
        };
        $(lottery).find('.lottery-unit.lottery-unit-' + index).addClass('active');
        this.index = index;
        return false;
    },
    stop: function(index) {
        this.prize = index;
        return false;
    }
};

function roll() {
    lottery.times += 1;
    lottery.roll(); //轉動過程調用的是lottery的roll方法，這裏是第一次調用初始化
    
    if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
        clearTimeout(lottery.timer);
        lottery.prize = -1;
        lottery.times = 0;
        click = false;
    } else {
        if (lottery.times < lottery.cycle) {
            lottery.speed -= 10;
        } else if (lottery.times == lottery.cycle) {
            var index = Math.random() * (lottery.count) | 0; //靜態演示，隨機產生一個獎品序號，實際需請求接口產生
            lottery.prize = index;        
        } 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;

window.onload = function(){
    lottery.init('lottery');

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