【求助攻】jquery 年会抽奖，搞不定啊

抽奖这东西都是必须在后台产生结果和记录的，在前台产生结果是很容易作弊的。也不能用cookie保存，因为cookie是可以被用户清除的
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>抽奖年终大会</title>
<style>
*{margin:0;padding:0;outline: none;}
body,em,b,h3,h4,h6{font-family:'Microsoft Yahei','微软雅黑'; font-style:normal; font-weight:normal;}
body{width:100%;height:100%;background:#bf0011;}
a{text-decoration:none;outline:none;text-align:center;display:inline-block;cursor:pointer}
.box{font-size:12px;height:64px;width:750px;position:fixed;left:50%;top:60%;margin-left:-298px;margin-top:-16px;}
.box ul{float:left;display:inline;width:265px;height:64px;overflow:hidden;background:white;}
.box ul li{height:64px; line-height:58px;text-align:center;list-style:none;font-size:48px;overflow:hidden;}
.box a,.box em, .box select{border:#fff solid 1px;height:62px; line-height:62px;float:left;margin-left:10px;text-align:center;font-size:24px;}
.box em{background:#e4e4e4;cursor:pointer;width:193px;color:#000;}
.box a.start, .box select{background:red;color:#fff001;width:113px;}
.box a.stop{background:#ccc;width:113px;}
.bg{background:black;opacity:0.2;filter:alpha(opacity:20);width:100%;position:absolute;top:0;left:0;z-index:998;display:none;}
.dg{position:fixed;top:50%;left:50%;z-index:999;background:rgba(214,0,41,0.9);box-shadow:0 0 10px 5px #891717;overflow:hidden;display:none;}
.dg-main{position:relative;color:#ffea00;padding:60px;}
h3,h4{text-align:center;overflow:hidden;}
.dg-main h3{font-size:68px;height:70px; line-height:70px;}
.dg-main h4{font-size:48px;margin-top:24px;}
.close{width:33px; height:33px;position:absolute;top:0;right:0;background:black;font-size:12px;color:white;font-size:24px;line-height:26px;text-align:center;}
.dg-main b{display:inline-block;margin:0 10px;}
.SelectDg1{width:517px; margin-left:-258px;}
.SelectDg2{width:800px; margin-left:-400px;}
.SelectDgTab{padding:0 50px;margin-top:50px;overflow:hidden;}
.SelectDgTab table{border-left:#ffea00 solid 1px;border-top:#ffea00 solid 1px;width:100%;border-collapse: collapse;border-spacing: 0;}
.SelectDgTab td,.SelectDgTab th{padding:10px;border-right:#ffea00 solid 1px;;border-bottom:#ffea00 solid 1px;text-align:left;font-weight:normal}
.SelectDgTab th{background:#910909;font-weight:bold;font-size:18px;}
.SelectDgTab td{font-size:16px;}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function () {
    var a1,a2,b,c,d,d1,da,ds,sa,l,h,t,i,u,v,name;
    u=$('.box ul');
    b=$('.bg');
    d1=$('.SelectDg1');
    d2=$('.SelectDg2');
    i=0;
    name=$('#name').html();

    //改变弹窗的高度
    d1.css('marginTop',-d1.height()/2+'px');
    d2.css('marginTop',-d2.height()/2+'px');
    $('bg').css({'width':$(window).width()+'px','height':$(document).height()+'px'});

    //隐藏背景
    function CloseDg(){
        $('.bg').hide();
        $('.dg').hide();
    }
    $('.close').click(function(){
        CloseDg();
    });
    $('.bg').click(function(){
        CloseDg();
    });
});
</script>
</head>
<body>
<div class="box">
    <ul>
    </ul>
    <select id="prizy-lvl"><option value="0">一等奖</option><option value="1">二等奖</option><option value="2">三等奖</option></select>
    <a class="start">抽奖</a>
    <a class="stop" style="display:none">停止</a>
    <em class="select">查询中奖名单</em>
</div><span class="bg"></span>
<div class="SelectDg1 dg">
    <div class="dg-main"><h3>此次中奖名单</h3><h4></h4><a href="javascript:;" class="close">x</a></div>
</div>
<div class="SelectDg2 dg" style="display:none;">
    <div class="dg-main">
        <h3>所有中奖名单</h3>
        <div class="SelectDgTab">
            <table>
                <tr>
                    <th width="20%">奖项</th>
                    <th>姓名</th>
                </tr>
                <tr>
                    <td>一等奖</td>
                    <td id="one"></td>
                </tr>
                <tr>
                    <td>二等奖</td>
                    <td id="two"></td>
                </tr>
                <tr>
                    <td>三等奖</td>
                    <td id="three"></td>
                </tr>
            </table>
        </div>
        <a href="javascript:;" class="close">x</a>
    </div>
</div>
</body>
<script type="text/javascript">
            function prizy(name){
                    this.name = name;
                    this.noprizyname = "noprizyname";
                    this.alreadyprizyname = "alreadyprizyname";
                    this.oneprizy = "oneprizy";
                    this.twoprizy = "twoprizy";
                    this.threeprizy = "threeprizy";
                    this.prizyLvl = [ "oneprizy", "twoprizy", "threeprizy"];
                    this.timeID = 0;
                    this.frequency = 50;
            }
            prizy.prototype.getnoprizy = function(){
                    var noprizyname = getCookie(this.noprizyname);
                    if (noprizyname == null){
                            noprizyname = this.name.join(",");
                    }
                    return noprizyname.split(",");
            }
            prizy.prototype.updateprizy = function(lvl, name){
                    if (getCookie(lvl) == null) {
                            setCookie(lvl, name);
                    }else{
                            setCookie(lvl, getCookie(lvl) + "," + name);
                    }                    //重新设置已经获奖用户名字的cookie
                    if (getCookie(this.alreadyprizyname) == null) {
                                setCookie(this.alreadyprizyname, name);
                    }else{
                            setCookie(this.alreadyprizyname, getCookie(this.alreadyprizyname) + "," + name);
                    }                    //重新设置没有获奖用户名字的cookie
                    var alreadyprizyArr = getCookie(this.alreadyprizyname).split(",");
                    var noprizyArr = getUnique( this.name, alreadyprizyArr);
                    var noprizyname = noprizyArr.join(",");
                    setCookie(this.noprizyname, noprizyname);
            }            prizy.prototype.motation = function(noprizy){
                    this.timeID = setInterval(function(){
                            var $u = $(".box ul");
                            var luckyname = noprizy[Math.ceil(Math.random()*noprizy.length-1)];
                            $u.html('<li>'+luckyname+'</li>');
                    }, this.frequency);
            }            prizy.prototype.start = function(){
                    var noprizy = this.getnoprizy();
                    this.motation(noprizy);
            }
            prizy.prototype.stop = function(){
                    window.clearInterval(this.timeID);
                    var lvl = $("#prizy-lvl").val();
                    var prizyname = $(".box ul li").text();
                    this.updateprizy(this.prizyLvl[lvl], prizyname);
                    console.log(this.prizyLvl[lvl] +","+prizyname);
            }
            prizy.prototype.showresult = function(){
                    var oneprizy = getCookie(this.oneprizy)==null  ?  "" : getCookie(this.oneprizy);
                    var twoprizy = getCookie(this.twoprizy)==null ? "" : getCookie(this.twoprizy);
                    var threeprizy = getCookie(this.threeprizy)==null? "" : getCookie(this.threeprizy);
                    $("#one").text(oneprizy);
                    $("#two").text(twoprizy);
                    $("#three").text(threeprizy);
            }            function setCookie(name,value)
            {
                    var Days = 30;
                    var exp = new Date();
                    exp.setTime(exp.getTime() + Days*24*60*60*1000);
                    document.cookie = name + "="+  decodeURI(value) + ";expires=" + exp.toGMTString();
            }
            function getCookie(name)
            {
                    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
                    if(arr=document.cookie.match(reg)){
                        return decodeURIComponent(arr[2]);
                    }
                    else {
                        return null;
                    }
            }
            function getUnique(a,b){
                    var obj = new Object();
                    for(var i =0,len = a.length;i<len;i++){
                            obj[a[i]] = 1;
                    }
                    for(var i =0,len = b.length;i<len;i++){
                            obj[b[i]] = obj[b[i]]?2:1;
                    }
                    var arr = new Array();
                    var i = 0;
                    for(var per in obj){
                            if(obj[per] == 1){
                                    arr[i++] = per;
                            }
                    }
                    return arr;
            }            $(function(){
                    var name = ["张三", "李四", "王五", "赵六", "小七", "小八", "小九"],
                          u=$('.box ul'),
                          d1=$('.SelectDg1');

                    var prizylvlname = ["一等奖", "二等奖", "三等奖"];
                    var o = new prizy(name);
                    $(".start").click(function(){o.start(); $(this).hide(); $(".stop").show(); });
                    $(".stop").click(function(){
                            o.stop();
                            $(".start").show();
                            $(this).hide().prev().show();
                            v=u.find('li:first').text();
                            b=$('.bg');
                            b.show();
                            d1.show().find('h4').html(prizylvlname[$("#prizy-lvl").val()]+ "：" + v);
                    })                    $('.select').click(function(){
                        var  b=$('.bg'),
                        d2=$('.SelectDg2');
                        b.show();
                        d2.show();
                        o.showresult();
                    });
            });
</script>
</html>
无聊就写了试试，没什么技术含量，不对的地方请大家多多指教

调试易

【求助攻】jquery 年会抽奖，搞不定啊

解决方案 »