master

分支 (1)

管理

管理

master

web-lottery
/
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>网页抽奖小工具</title>

    <meta name="description" content="一个简单的在线抽奖系统, 可用于公司年会抽奖, 电视台抽奖等，可以自己设定抽奖名单、抽奖人数、每次出奖人数，有防止重复得奖的功能。">
    <meta name="keywords" content="">
    <meta name="baidu-tc-verification" content="3e8294dabe46e8def7d4b790be59d4cc">

    <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.2.custom.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

    <style type="text/css">
        table {
            margin: 12px auto;
            border-collapse: collapse;
            width: 95%;
            background: #fff;
        }

        th,
        td {
            border: 2px solid #333;
        }

        label {
            margin: 6px 0;
            font-size: 14px;
            font-weight: bold;
            display: block;
        }

        input[type=text] {
            width: 600px;
        }

        input {
            width: expression(this.type=="text"?"600px":"auto");
        }

        textarea {
            width: 600px;
        }

        #main {
            color: #000;
            margin: 0 auto;
            padding-top: 40px;
            ;
            width: 980px;
        }

        #event_title {
            color: #ff0;
            margin: 26px;
            padding: 0;
            font-size: 56px;
            text-align: center;
        }

        #event_title span {
            padding: 0 32px;
            background: #f00;
        }

        #rolling_board {
            color: #000;
            line-height: 40px;
            font-size: 40px;
            font-weight: bold;
            margin: 34px auto;
            padding: 8px;
            width: 640px;
            text-align: center;
            background: #ff3;
            border: 6px solid #03f;
        }

        #current_step {
            line-height: 42px;
            font-size: 42px;
            font-weight: bold;
        }

        #tabs {
            padding: 0;
        }

        #tabs-1 {
            padding: 4px;
            font-size: 14px;
            text-align: center;
            border: 3px solid #33f;
            height: 580px;
        }

        #tabs-2,
        #tabs-3,
        #tabs-4 {
            padding: 4px;
            border: 1px solid #ccc;
        }

        #tabs-3 h3,
        #tabs-4 h3 {
            padding-left: 6px;
            border-left: 6px solid #c00;
        }

        #tabs-4 h2 {
            text-align: center;
        }

        #rotate_div {
            padding-top: 60px;
            height: 400px;
        }

        #print_box {
            margin-top: 30px;
            font-weight: bold;
            font-size: 28px;
            width: 70%;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }

        #print_box span {
            margin: 4px;
            color: #fff;
        }
    </style>
</head>

<body class="bg index">
    <div id="container">
        <div id="wrapper" class="mh">
            <h2 style="text-align: center">在线抽奖</h2>
            <div class="h20"></div>
            <div class="content" style="text-align: center;">一个简单的在线抽奖系统, 可用于公司年会抽奖, 电视台抽奖等，可以自己设定抽奖名单、抽奖人数、每次出奖人数，有防止重复得奖的功能。</div>

            <script type="text/javascript">
                var game;

                $(function() {
                    $('#loading').hide();
                    $('#tabs').slideDown('fast');
                    $('#tabs').tabs();

                    game = new Game();
                    save_setting();
                });

                // 绑定回车键盘操作
                $(document).keypress(function(e) {
                    switch (e.which) {
                        case 13:
                            game.process();
                            break;
                    }
                });
            </script>

            <div id="main">
                <div id="loading" style="text-align: center; display: none;">
                    <h2>Loading...</h2>
                </div>

                <div id="tabs" style="display: block;" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
                    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
                        <li class="ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">抽奖</a></li>
                        <li class="ui-corner-top ui-state-default"><a href="#tabs-2">设置</a></li>
                        <li class="ui-corner-top ui-state-default"><a href="#tabs-3">结果</a></li>
                        <li class="ui-corner-top ui-state-default"><a href="#tabs-4">帮助</a></li>
                    </ul>

                    <div id="tabs-1" style="background: url(&quot;images/2.jpg&quot;) center center no-repeat;" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                        <h1 id="event_title"><span>抽奖活动</span></h1>

                        <div id="rotate_div" style="display: block;">
                            <div><span id="current_step" style="display: none;">一等奖(1个)</span></div>

                            <div id="rolling_board" style="display: none;"><span style="color: #f33">员工L</span></div>

                            <div id="print_box" style="display: block;">请按回车开始</div>
                        </div>
                    </div>
                    <!-- /#tabs-1 -->

                    <div id="tabs-2" style="background: #fff;" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
                        <label>活动标题</label>
                        <div><input type="text" name="title" value="抽奖活动"></div>

                        <label>奖项设置</label>
                        <div>每行一个奖项, 格式为竖线分隔的: 奖项名|数量|每次抽几个|奖品</div>
                        <textarea name="prizes" rows="6" cols="84">
三等奖|4|2|美女1名/每人
二等奖|2|2|100万美金/每人
一等奖|1|1|10本世界名著/每人
                        </textarea>

                        <label>候选人列表</label>
                        <div>每行一人, 或半角逗号分隔</div>
                        <textarea name="candidates" rows="6" cols="84">
员工A
员工B
员工C
员工D
员工E
员工F
员工G
员工H
员工I
员工J
员工K
员工L
员工M
员工N
员工O
员工P
员工Q
员工R
员工S
员工T
员工U
员工V
员工W
员工X
员工Y
员工Z
                        </textarea>

                        <label>跳动时间间隔</label>
                        <div><input type="text" name="interval" value="50" style="width: 50px;"> ms</div>

                        <label>背景图片</label>
                        <div>可以输入图片链接使用网络上的图片, 也可以把图片拷贝到当前目录, 把图片文件名填入即可.</div>
                        <div><input name="background_image" type="text" value="images/2.jpg"></div>


                        <p><input type="button" value="保存" onclick="save_setting()"></p>
                    </div>
                    <!-- /#tabs-2 -->

                    <div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
                        <h2>一等奖</h2>员工L &nbsp;<br>
                        <h2>二等奖</h2>员工M &nbsp;员工H &nbsp;<br>
                        <h2>三等奖</h2>员工E &nbsp;员工A &nbsp;员工I &nbsp;员工B &nbsp;<br></div>
                    <!-- /#tabs-3 -->

                    <div id="tabs-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
                        <h2>抽奖软件</h2>
                        <p>在浏览器上运行的抽奖程序</p>

                        <h3>操作方便</h3>
                        <p>抽奖过程全键盘操作, 只需要按回车(Enter)键即可, 类似播放PPT幻灯片, 非常简单.</p>

                        <h3>配置灵活</h3>
                        <p>可配置的选项有: 活动标题, 奖项, 候选人, 摇奖时的跳转速度, 背景图片. 其中, 每一个奖项, 可以一次开完, 也可以一次只开一部分. 例如, 三等奖一共6个, 每次只开2个, 需要开3次才能开完三等奖, 增加娱乐性. 图片可以更换为带自己公司Logo的图片, 以便适应当前节日, 所以, 本抽奖程序任何节日的任何类似的抽奖节目都可使用.</p>

                        <h3>抽奖流程</h3>
                        <pre>
等待开始
开场(open): 奖项介绍
奖项循环: 如果多于一个奖项, 则循环
	奖项开场(step_open)
	摇奖循环: 如果不是一次开完一个奖项, 则循环
		摇奖开始(rotate_start)
		摇奖结束(rotate_stop)
	奖项结束(step_close): 单项中奖名单
闭场(close)
                        </pre>
                    </div>
                    <!-- /#tabs-4 -->
                </div>

                <script type="text/javascript">
                    function in_array(item, list) {
                        for (var i = 0; i < list.length; i++) {
                            if (item == list[i]) {
                                return true;
                            }
                        }
                        return false;
                    }

                    /**
                     * 返回指定元素在数组中的索引, 如果没找到, 返回-1;
                     */
                    function array_find(list, item) {
                        for (var i = 0; i < list.length; i++) {
                            if (item == list[i]) {
                                return i;
                            }
                        }
                        return -1;
                    }

                    // 从数组中删除元素. 返回新数组.
                    function array_del(list, item) {
                        var arr = [];
                        for (var i = 0; i < list.length; i++) {
                            if (item != list[i]) {
                                arr.push(list[i]);
                            }
                        }
                        return arr;
                    }

                    // 从数组中删除元素. 返回新数组.
                    function array_del_all(list, items) {
                        var arr = [];
                        for (var i = 0; i < list.length; i++) {
                            if (array_find(items, list[i]) == -1) {
                                arr.push(list[i]);
                            }
                        }
                        return arr;
                    }

                    /**
                     * 把数组当作环形的, 返回从start开始, 一共count个元素.
                     * 如果count大于数组长度, 返回整个数组.
                     */
                    function array_slice(list, start, count) {
                        var ret;

                        ret = list.slice(start, start + count);
                        if (ret.length < count) {
                            ret = ret.concat(list.slice(0, count - ret.length));
                        }

                        return ret;
                    }

                    // 扰乱数组元素的顺序.
                    function array_shuffle(list) {
                        var len = list.length;
                        for (var i = 0; i < len * 5; i++) {
                            var p1 = parseInt(len * Math.random());
                            var p2 = parseInt(len * Math.random());
                            var tmp = list[p1];
                            list[p1] = list[p2];
                            list[p2] = tmp;
                        }
                    }

                    /*
                    状态/动作

                    开场(open)
                    循环{
                    	奖项开场(step_open)
                    	奖项抽奖(rotate_start)
                    	奖项抽奖(rotate_stop)
                    	奖项闭场(step_close)
                    }
                    闭场(close)

                    */
                    var Game = function() {
                        var self = this;

                        this.step = -1;
                        this.interval = 100;
                        this.rotate_index = 0;
                        self.action = 'open';

                        this.prizes = [];
                        this.candidates = [];
                        this.results = [];

                        this.init = function() {
                            this.step = 0;
                            this.stop = false;
                            this.rotate_index = 0;
                            self.action = 'open';
                            this.results = [];

                            for (var i = 0; i < self.prizes.length; i++) {
                                var p = self.prizes[i];
                                self.results[i] = [];
                            }

                            show_current_step('');
                            var str = '请按回车开始';
                            str += '<br/><br/>';
                            print_box('请按回车开始');

                            $('#rolling_board').hide();
                            $('#rotate_div').css('background', '');
                        }

                        this.reset = function() {
                            this.prizes = [];
                            this.candidates = [];
                            this.results = [];
                        }

                        this.process = function() {
                            show_results();

                            // 先更新状态再执行函数
                            switch (self.action) {
                                case 'open':
                                    self.action = 'step_open';
                                    $('#rotate_div').hide();
                                    on_open();
                                    $('#rotate_div').fadeIn('slow');
                                    break;
                                case 'close':
                                    self.action = '';
                                    on_close();
                                    break;
                                case 'step_open':
                                    self.action = 'rotate_start';
                                    $('#rotate_div').hide();
                                    on_step_open();
                                    $('#rotate_div').fadeIn('fast');
                                    break;
                                case 'step_close':
                                    if (self.step == self.prizes.length) {
                                        self.action = 'close';
                                    } else {
                                        self.action = 'step_open';
                                    }
                                    on_step_close();
                                    break;
                                case 'rotate_start':
                                    self.action = 'rotate_stop';
                                    on_rotate_start();
                                    break;
                                case 'rotate_stop':
                                    on_rotate_stop();
                                    break;
                                default:
                                    save_setting();
                                    break;
                            }
                        };
                    }

                    function on_open() {
                        show_current_step('活动说明');

                        var str = '<table align="center">';
                        str += '<tr><th>奖项</th><th>数量</th><th>奖品</th></tr>\n';
                        for (var i = game.prizes.length - 1; i >= 0; i--) {
                            var p = game.prizes[i];
                            str += '<tr><td>' + p.name + '</td><td>' + p.num + '</td><td>' + p.award + '</td></tr>\n';
                        }
                        str += '</table>';
                        print_box(str);
                    }

                    function on_close() {
                        show_current_step('');

                        $('#print_box').hide();
                        var str = '';
                        str += '<span><b style="font-size: 62px;">抽奖结束</b><span><br/>';
                        print_box(str);
                        $('#print_box').fadeIn('slow');
                    }

                    function on_step_open() {
                        show_current_step();
                        print_box('按回车开始');
                        $('#rolling_board').html('...');
                    }

                    function on_step_close() {
                        var str = '';
                        str += '<span>&nbsp;* 中奖名单 *&nbsp;';
                        var r = game.results[game.step - 1];
                        for (var n = 0; n < r.length; n++) {
                            if(n % 2 == 0){
                                str += '<br/>' + r[n];
                            }else{
                                str += '&nbsp;|&nbsp;' + r[n];
                            }
                        }
                        str += '</span>';

                        print_box(str);
                        $('#rolling_board').slideUp('normal');
                    }

                    function on_rotate_start() {
                        $('#rolling_board').slideDown('normal');

                        game.interval = parseInt($('input[name=interval]').val());

                        game.stop = false;
                        game.rotate_index = 0;

                        // 打乱顺序
                        array_shuffle(game.candidates);

                        rotate_run();

                        show_current_step();
                        print_box('按回车停止');
                    }


                    function on_rotate_stop() {
                        // 等一段随机时间再停止.
                        game.interval += parseInt(0.9 * game.interval);
                        setTimeout('game.stop=true', 230 + parseInt(230 * Math.random()));
                        //game.stop = true;
                    }


                    function rotate_run() {
                        var num_a = game.prizes[game.step].num_a_time;
                        var size = game.prizes[game.step].num - game.results[game.step].length;
                        if (size > num_a) {
                            size = num_a;
                        }

                        var arr = array_slice(game.candidates, game.rotate_index, size);
                        $('#rolling_board').html(arr.join(' '));

                        game.rotate_index += num_a;
                        if (game.rotate_index >= game.candidates.length) {
                            game.rotate_index -= game.candidates.length;
                        }

                        if (game.stop) {
                            game.action = 'rotate_start';

                            game.results[game.step] = game.results[game.step].concat(arr);
                            game.candidates = array_del_all(game.candidates, arr);

                            show_results();
                            print_box('按回车继续');

                            if (game.results[game.step].length == game.prizes[game.step].num) {
                                game.step++;
                                game.action = 'step_close';
                            }

                            var h = '<span style="color: #f33">' + $('#rolling_board').html() + '</span>';
                            $('#rolling_board').html(h)
                        } else {
                            setTimeout('rotate_run()', game.interval);
                        }
                    }


                    function show_current_step(str) {
                        if (str == undefined) {
                            var found = game.results[game.step].length;
                            var all = game.prizes[game.step].num;
                            var num_a = game.prizes[game.step].num_a_time;
                            var b = (num_a + found) > all ? all : (num_a + found);

                            var str = game.prizes[game.step].name + '(' + game.prizes[game.step].num + '个';
                            if (num_a != all) {
                                str += ', ' + (found + 1) + '-' + b;
                            }
                            str += ')';
                        }
                        if (str == '') {
                            $('#current_step').hide('fast');
                        } else {
                            $('#current_step').html(str);
                            $('#current_step').show();
                        }
                    }

                    function print_box(str) {
                        if (str == undefined) {
                            var str = '<span>';
                            var r = game.results[game.step];
                            for (var n = 0; n < r.length; n++) {
                                str += r[n] + ' &nbsp;';
                            }
                            str += '</span>';
                        }
                        if (str == '') {
                            $('#print_box').hide('fast');
                        } else {
                            $('#print_box').html(str);
                            $('#print_box').show();
                        }
                    }

                    function show_results() {
                        var str = '';
                        for (var i = game.results.length - 1; i >= 0; i--) {
                            str += '<h2>' + game.prizes[i].name + '</h2>';
                            var r = game.results[i];
                            for (var n = 0; n < r.length; n++) {
                                str += r[n] + ' &nbsp;';
                            }
                            str += '<br/>';
                        }
                        $('#tabs-3').html(str);
                    }


                    function save_setting() {
                        game.reset();

                        var ps = $.trim($('textarea[name=prizes]').val()).split('\n');
                        for (var i = 0; i < ps.length; i++) {
                            var p = $.trim(ps[i]);
                            if (p.length == 0) {
                                continue;
                            }
                            var ex = p.split('|');
                            var prize = {
                                name: $.trim(ex[0]),
                                num: parseInt($.trim(ex[1])),
                                num_a_time: parseInt($.trim(ex[2])),
                                award: $.trim(ex[3])
                            };
                            game.prizes.push(prize);
                        }

                        var ps = $.trim($('textarea[name=candidates]').val()).replace(/,/g, '\n').split('\n');
                        for (var i = 0; i < ps.length; i++) {
                            var p = $.trim(ps[i]);
                            if (p.length == 0) {
                                continue;
                            }
                            game.candidates.push(p);
                        }

                        $('#event_title span').html($('input[name=title]').val());
                        $('#tabs-1').css('background', 'url(' + $('input[name=background_image]').val() + ') center center no-repeat');

                        game.init();
                    }
                </script>

            </div>

        </div>
    </div>
</body>

</html>