幸运抽奖程序

Html

Css

1
2
3
4
5
6
7
8
9
<div class="myBox">
    <ul class="cj2">
        <li>1</li>
    </ul>
    <div class="text">
        <div class="bt bt2">点我抽奖</div>
        <div class="jg jg2">中奖者为"<em></em>"号</div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


    
        1
    
    
        点我抽奖
        中奖者为""号

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
* {
    margin:0;
    padding:0;
}
a {
    text-decoration:none;
}
img {
    border:none;
}
li {
    list-style:none outside none;
}
body {
    background:#c9c9c9;
    font-size:14px;
    font-family:"宋体";
}
.myBox {
    margin:50px auto 0;
}
.myBox ul {
    margin:0 auto 0;
    position:relative;
    width:500px;
    height:100px;
    overflow:hidden;
}
.myBox li {
    width:100px;
    height:100px;
    text-align:center;
    line-height:100px;
    font-size:40px;
    color:#fff;
    background:rgba(222,122,155,0.5);
}
.myBox li.on {
    background:rgba(66,56,222,0.5);
}
.text {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
//by zyp
;(function($, window, document, undefined) {
    var LuckDraw = function(ele, opt) {
        this.$element = ele,
            this.defaults = {
                row: 4, //行
                column: 4, //列
                spacing: 0,
                click: null,
                time: 3,
                end: function(e) {}
            },
            this.target,
            this.options = $.extend({}, this.defaults, opt);
    }
    LuckDraw.prototype = {
        init: function() {
            var $this = this.$element;
            var row = this.options.row;
            var col = this.options.column;
            var spacing = this.options.spacing;
            var click = this.options.click;
            var allNumber = 2 * (row + col) - 4;
            var line = row - 2; //除去上下de行数
            var length = $this.children('li').length;
            var options = this.options;
            if (length < allNumber) {
                for (var i = length; i <= (allNumber - length); i++) {
                    $this.append("<li>" + (i + 1) + "</li>");
                }
            }
            var children = $this.children('li');
            var width = children.eq(0).width() || 0;
            var height = children.eq(0).height() || 0;
            //元素初始化
            $this.css({
                position: 'relative',
                width: col * width + (col - 1) * spacing,
                height: row * height + (row - 1) * spacing
            });
            children.css({
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

//by zyp
;(function($, window, document, undefined) {
    var LuckDraw = function(ele, opt) {
        this.$element = ele,
            this.defaults = {
                row: 4, //行
                column: 4, //列
                spacing: 0,
                click: null,
                time: 3,
                end: function(e) {}
            },
            this.target,
            this.options = $.extend({}, this.defaults, opt);
    }
    LuckDraw.prototype = {
        init: function() {
            var $this = this.$element;
            var row = this.options.row;
            var col = this.options.column;
            var spacing = this.options.spacing;
            var click = this.options.click;
            var allNumber = 2 * (row + col) - 4;
            var line = row - 2; //除去上下de行数
            var length = $this.children('li').length;
            var options = this.options;

if (length < allNumber) {
                for (var i = length; i <= (allNumber - length); i++) {
                    $this.append("<li>" + (i + 1) + "</li>");
                }
            }
            var children = $this.children('li');
            var width = children.eq(0).width() || 0;
            var height = children.eq(0).height() || 0;

//元素初始化
            $this.css({
                position: 'relative',
                width: col * width + (col - 1) * spacing,
                height: row * height + (row - 1) * spacing
            });
            children.css({
                position: 'absolute'
            });

if (line == 0) {
                initOne();
            } else {
                initTwo();
            }

//初始化函数
            //此时分成4个部分，上、右、下、左
            //上： 0  ~  col-1
            //右： col ~ col+line
            //下： col+line+1 ~ 2*col+line-1
            //左： else
            //如果只有两行
            //此时分成4个部分，上、右、下、左

var target = $this.target || Math.floor(Math.random() * allNumber + 1); //目标，指定或随机
            var ix = 0; //位置
            var stop;
            var flg = false; //抽奖是否正在运行
            /*
            	加速度公式
            	v1 = v0 + a*t;注意加速度的v代表时间
            	此时的t可以我们自己定义，所以是常量，所以只需要求a的值
            */
            var a = -25.0;
            var v0 = 500.0;
            var t = 0.0,
                v;
            var time = this.options.time * 1000; //匀速运行的时间，单位秒

$(click).on('click', function() {
                if (!flg) {
                    flg = true;
                    target = $this.target || Math.floor(Math.random() * allNumber + 1);
                    speedUp();
                } else {
                    return;
                }
            });

//加速
            function speedUp() {
                runner(ix);
                if (v <= 50) {
                    clearTimeout(stop);
                    v = 50;
                    t = 0.0;
                    uniform(); //跳转到匀速
                } else {
                    t++;
                    v = v0 + a * t;
                    stop = setTimeout(speedUp, v);
                }
            }
            //匀速
            function uniform() {
                stop = setTimeout(uniform, v);
                if (t == time / 50) {
                    clearTimeout(stop);
                    t = 0.0;
                    speedDown();
                } else {
                    t++;
                }
                runner(ix);
            }
            //减速
            function speedDown() {
                var stop3 = setTimeout(speedDown, v);
                if (v >= 500) {
                    v = 500;
                    if (ix == target - 1) {
                        clearTimeout(stop3);
                        options.end(target);
                        flg = false;
                    }
                } else {
                    t++;
                    v = v - a * t;
                }
                runner(ix);
            }
            //ix++
            function runner(i) {
                children.removeClass('on').eq(ix).addClass('on');
                i++;
                if (i == allNumber) {
                    ix = 0;
                } else {
                    ix = i;
                }
            }
        },
        setTarget: function(options) {
            var $this = this.$element;
            $this.target = options;
        }
    }
    $.fn.myLuckDraw = function(options, target) {
        var Ld = new LuckDraw(this, options);
        Ld.setTarget(target);
        Ld.init();
        return this;
    }
})(jQuery, window, document);

$(function() {

var tar = 5;

$('.cj2').myLuckDraw({
        row: 3, //行
        column: 5, //列
        spacing: 5, //空隙
        click: '.bt2', //点击触发
        time: 3, //匀速运动的时间
        end: function(e) {
            //抽奖执行完毕的回调函数,参数e为获奖编号
            //因为这里是指定的，所以e == 12
            $('.jg2 em').text(e);
        }
    });

});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.1

立即下载

幸运抽奖程序



代码描述：简单的抽奖程序

可以设置详细的名字，数字，用来抽奖

4

最新

发表评论全部评论

暂时没有评论！

露0

2017/8/10 11:00:34

这里面每个块的概率都是一样的么

罄?一瞥0

2017/8/10 11:19:24

是的，Math.floor(Math.random() * allNumber + 1)取1～12里面的随机数

回复

罄?一瞥0

2017/8/9 17:26:17

用js生成的li顺时针排列，厉害了，我可以拜师吗
回复

刘凯0

2017/8/7 12:03:58

不错
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

刘凯

相关代码

幸运抽奖程序

最新