关注前端 | 前端博客
当前位置: JavaScript > 九宫格抽奖案列

九宫格抽奖案列

2019-01-18 分类:JavaScript 作者:管理员 阅读(434)

活动抽奖案列之九宫格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>原生js-九宫格抽奖效果</title>
<style type="text/css">
*{margin:0;padding: 0;}
#lottery table{margin:10px auto;}
#lottery table td img{ width:100px;height:100px;vertical-align: top;}
#lottery table td{width:100px;height:100px;text-align:center;vertical-align:middle;font-size:16px;color:#333;}
#lottery table td a{display: block;width:100px;height:100px;line-height:100px;display:block;text-decoration:none;}
#lottery table td.active{background-color:#936BFF;}
</style>
</head>
<body>
    <div class="lottery-wrap">
        <div id="lottery">
            <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td class="lottery-unit lottery-unit-0"><img src="1.png"></td>
                        <td class="lottery-unit lottery-unit-1"><img src="2.png"></td>
                        <td class="lottery-unit lottery-unit-2"><img src="7.png"></td>
                    </tr>
                    <tr>
                        <td class="lottery-unit lottery-unit-7"><img src="3.png"></td>
                        <td class="lottery-unit--1"><a href="javascript:;">抽奖</a></td>
                        <td class="lottery-unit lottery-unit-3"><img src="5.png"></td>
                    </tr>
                    <tr>
                        <td class="lottery-unit lottery-unit-6"><img src="8.png"></td>
                        <td class="lottery-unit lottery-unit-5"><img src="6.png"></td>
                        <td class="lottery-unit lottery-unit-4"><img src="4.png"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
<script type="text/javascript">
window.onload=function(){
    lottery.init('lottery');
};    
var lottery={
    index:-1,   //当前转动到哪个位置,起点位置
    count:0,    //总共有多少个位置
    timer:0,    //setTimeout的ID,用clearTimeout清除
    speed:20,   //初始转动速度
    times:0,    //转动次数
    cycle:50,   //转动基本次数:即至少需要转动多少次再进入抽奖环节
    prize:-1,   //中奖位置
    isClick:false,
    init:function(id){
        var This=this;
        if (document.querySelectorAll("#"+id+" .lottery-unit").length>0) {
            this.wrap = document.querySelector("#"+id);
            this.count = this.wrap.querySelectorAll(".lottery-unit").length;
            this.wrap.querySelector('a').onclick=function(){
                if (This.isClick)return;
                This.speed=100;
                This.rollInit();
                This.isClick=true;    
            }
        }
    },
    roll:function(){
        this.wrap .querySelector(".lottery-unit-"+this.index).classList.remove("active");
        this.index += 1;
        if (this.index>this.count-1) {
            this.index = 0;
        };
        this.wrap .querySelector(".lottery-unit-"+this.index).classList.add("active");
        return false;
    },
    stop:function(index){
        this.prize=index;
        return false;
    },
    rollInit:function(){
        var This=this;
        this.times += 1;
        this.roll();
        if (this.times > this.cycle+10 && this.prize==this.index) {
            clearTimeout(this.timer);
            this.prize=-1;
            this.times=0;
            this.isClick=false;
        }else{
            if (this.times<this.cycle) {
                this.speed -= 10;
            }else if(this.times==this.cycle) {
                var index = Math.random()*(this.count)|0;
                this.prize = index;      
            }else{
                if (this.times > this.cycle+10 && ((this.prize==0 && this.index==7) || this.prize==this.index+1)) {
                    this.speed += 110;
                }else{
                    this.speed += 20;
                }
            }
            if (this.speed<40) {
                this.speed=40;
            };
            this.timer = setTimeout(function(){
                This.rollInit()
            },this.speed);
        }
        return false;
    }
};
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>原生js-九宫格抽奖效果</title>
<style type="text/css">
*{margin:0;padding: 0;}
#lottery table{margin:10px auto;}
#lottery table td img{ width:100px;height:100px;vertical-align: top;}
#lottery table td{width:100px;height:100px;text-align:center;vertical-align:middle;font-size:16px;color:#333;}
#lottery table td a{display: block;width:100px;height:100px;line-height:100px;display:block;text-decoration:none;}
#lottery table td.active{background-color:#936BFF;}
</style>
</head>
<body>
    <div class="lottery-wrap">
        <div id="lottery">
            <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td class="lottery-unit lottery-unit-0"><img src="1.png"></td>
                        <td class="lottery-unit lottery-unit-1"><img src="2.png"></td>
                        <td class="lottery-unit lottery-unit-2"><img src="7.png"></td>
                    </tr>
                    <tr>
                        <td class="lottery-unit lottery-unit-7"><img src="3.png"></td>
                        <td class="lottery-unit--1"><a href="javascript:;">抽奖</a></td>
                        <td class="lottery-unit lottery-unit-3"><img src="5.png"></td>
                    </tr>
                    <tr>
                        <td class="lottery-unit lottery-unit-6"><img src="8.png"></td>
                        <td class="lottery-unit lottery-unit-5"><img src="6.png"></td>
                        <td class="lottery-unit lottery-unit-4"><img src="4.png"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>

<script type="text/javascript">
window.onload=function(){

    var l=new Lottery({
        el:'#lottery',
        speed:30,
        cycle:40
    });

    l.init();
};
function Lottery(opt){
    this.index = -1 ;   //当前转动到哪个位置,起点位置
    this.prize = -1 ;   //中奖位置
    this.timer = 0  ;   //setTimeout的ID,用clearTimeout清除
    this.speed = opt.speed || 20 ;   //初始转动速度
    this.times = 0  ;   //转动次数
    this.cycle = opt.cycle || 50 ;   //转动基本次数:即至少需要转动多少次再进入抽奖环节
    this.isClick = false ;//点击标记
    this.wrap=document.querySelector(opt.el); //抽奖的容器
    this.units=this.wrap.querySelectorAll(".lottery-unit"); //抽奖容器里的奖项单元
    this.count = this.units.length;   //总共有多少个单元奖项
}

Lottery.prototype.init=function(){
    var This=this;
    if (this.count==0)return;
    This.wrap.querySelector('a').onclick=function(){
        if(This.isClick)return;
        This.roll();
        This.isClick=true;
    }
}
Lottery.prototype.roll=function(){
    var This=this;
    this.times += 1;
    this.rollInit();
    //如果转动次数 大于 转动基数 + 10  并且 中奖位置 就是 这个索引所在的 units 即奖项单元
    if (this.times > this.cycle+10 && this.prize==this.index) {
        //清除定时器
        clearTimeout(this.timer);
        //重置中奖位置
        this.prize=-1;
        //重置转动次数
        this.times=0;
        //重置点击标记状态
        this.isClick=false;
        //重置初始速度
        this.speed=20;
    }else{
        if (this.times<this.cycle) {//如果转动次数 小于 转动基数
            //初始速度每次 - 10
            this.speed -= 10;
        }else if(this.times==this.cycle) {//如果转动次数 等于 转动基数
            var index = Math.random()*(this.count)|0;
            this.prize = index;  
        }else{
            //如果转动次数 大于 转动基数 + 10 并且 (中奖位置为0并且这个奖项单元索引为7  或 中奖位置 为 索引值 +1)
            if (this.times > this.cycle+10 && ((this.prize==0 && this.index==7) || this.prize==this.index+1)) {
                this.speed += 110;//初始速度每次 + 110

            }else{
                this.speed += 20;//初始速度每次 + 20
            }
        }
         if (This.speed<40) {
            This.speed=40;
        };
        this.timer = setTimeout(function(){This.roll()},This.speed);
    }
}
Lottery.prototype.rollInit=function(){
    this.wrap.querySelector(".lottery-unit-"+this.index).classList.remove("active");
    this.index += 1;
    if (this.index>this.count-1)this.index = 0;
    this.wrap.querySelector(".lottery-unit-"+this.index).classList.add("active");
}

</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>原生js-九宫格抽奖效果</title>
<style type="text/css">
*{margin:0;padding: 0;}
#lottery table{margin:10px auto;}
#lottery table td img{ width:100px;height:100px;vertical-align: top;}
#lottery table td{width:100px;height:100px;text-align:center;vertical-align:middle;font-size:16px;color:#333;}
#lottery table td a{display: block;width:100px;height:100px;line-height:100px;display:block;text-decoration:none;}
#lottery table td.active{background-color:#936BFF;}
</style>
</head>
<body>
    <div class="lottery-wrap">
        <div id="lottery">
            <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td class="lottery-unit lottery-unit-0"><img src="1.png"></td>
                        <td class="lottery-unit lottery-unit-1"><img src="2.png"></td>
                        <td class="lottery-unit lottery-unit-2"><img src="7.png"></td>
                    </tr>
                    <tr>
                        <td class="lottery-unit lottery-unit-7"><img src="3.png"></td>
                        <td class="lottery-unit--1"><a href="javascript:;">抽奖</a></td>
                        <td class="lottery-unit lottery-unit-3"><img src="5.png"></td>
                    </tr>
                    <tr>
                        <td class="lottery-unit lottery-unit-6"><img src="8.png"></td>
                        <td class="lottery-unit lottery-unit-5"><img src="6.png"></td>
                        <td class="lottery-unit lottery-unit-4"><img src="4.png"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
<script>

window.onload=function(){
    var l=new Lottery('#lottery');
    l.init();
};
function Lottery(el){
    this.index = -1 ;   //当前转动到哪个位置,起点位置
    this.prize = -1 ;   //中奖位置
    this.timer = 0  ;   //setTimeout的ID,用clearTimeout清除
    this.speed = 20 ;   //初始转动速度
    this.times = 0  ;   //转动次数
    this.cycle = 50 ;   //转动基本次数:即至少需要转动多少次再进入抽奖环节
    this.isClick = false ;
    this.wrap=document.querySelector(el);
    this.units=this.wrap.querySelectorAll(".lottery-unit");
    this.count = this.units.length || 0  ;   //总共有多少个位置
    this.init=function(el){
         var This=this;
        if (This.count==0)return;
        This.wrap.querySelector('a').onclick=function(){
            if(This.isClick)return;
            This.roll();
            This.isClick=true;
            console.log(This)
        }
    };
    this.roll=function(){
        console.log(this)
        var This=this;
        this.times += 1;
        this.rollInit();
        if (this.times > this.cycle+10 && this.prize==this.index) {
            clearTimeout(this.timer);
            this.prize=-1;
            this.times=0;
            this.isClick=false;
            this.speed=20;
        }else{
            if (this.times<this.cycle) {
                this.speed -= 10;
            }else if(this.times==this.cycle) {
                var index = Math.random()*(this.count)|0;
                this.prize = index;      
            }else{
                if (this.times > this.cycle+10 && ((this.prize==0 && this.index==7) || this.prize==this.index+1)) {
                    this.speed += 110;
                }else{
                    this.speed += 20;
                }
            }
            if (this.speed<40) {
                this.speed=40;
            };
            this.timer = setTimeout(function(){
                This.roll();
            },This.speed);
        }
        return false;
    };
     this.rollInit=function(){

        this.wrap.querySelector(".lottery-unit-"+this.index).classList.remove("active");
        this.index += 1;
        if (this.index>this.count-1) {
            this.index = 0;
        };
        this.wrap.querySelector(".lottery-unit-"+this.index).classList.add("active");
        return false;
    };
}
</script>
</html>

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(2) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
2

感谢您让我添加个鸡腿!

支付宝
微信

上一篇:

下一篇:

共有 1 条评论 - 九宫格抽奖案列

  1. bao Windows 7 Chrome 63.0.3239.132

    加油,学习! 😉

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线