javascript - 公司一个年会抽奖程序的修改?
PHP中文网
PHP中文网 2017-04-11 11:25:08
[JavaScript讨论组]

这是公司年会抽奖的一个程序,其中特等奖,1等奖,2等奖设置了12个空格符占位,目的是为了让刚到不久的员工排除在外,又不让他们看到,怎么让程序不抽到这12个空格,请教了一个6年的老司机,没搞定,哪位前端大神帮忙看下,按空格键执行程序,谢谢
演示地址:
http://software.gsi.com.cn/test/

//lottery title
var lotteryTitles = ['特等奖1名','一等奖1名', '二等奖2名', '三等奖3名','四等奖10名','五等奖12名','六等奖15名','参与奖17名'];
//lottery prefix
var lotteryPrefixes = ['special','first', 'second', 'third','fourth','fifth','sixth','participate'];
//first,second,third and fourth prize

var members = [
//special
//0012,0013,0021,0027,0028,0029,0030,0031,0032,0034,0036,0037,0038,
    [
        '0001','0002','0003','0004','0005','0006','0007','0008','0009','0010',
        '0011','0014','0015','0016','0017','0018','0019','0020','0022','0023',
        '0024','0025','0026','0027','0033','0035','0039','0040','','','','','',
        '','','','','','','',
        '0041','0042','0043','0044','0045','0046','0047','0048','0049','0050',
        '0051','0052','0053','0054','0055','0056','0057','0058','0059','0060',
    ],
//One
    [
        '0001','0002','0003','0004','0005','0006','0007','0008','0009','0010',
        '0011','0014','0015','0016','0017','0018','0019','0020','0022','0023',
        '0024','0025','0026','0027','0033','0035','0039','0040','','','','','',
        '','','','','','','',
        '0041','0042','0043','0044','0045','0046','0047','0048','0049','0050',
        '0051','0052','0053','0054','0055','0056','0057','0058','0059','0060',
    ],
//Two
    [
        '0001','0002','0003','0004','0005','0006','0007','0008','0009','0010',
        '0011','0014','0015','0016','0017','0018','0019','0020','0022','0023',
        '0024','0025','0026','0027','0033','0035','0039','0040','','','','','',
        '','','','','','','',
        '0041','0042','0043','0044','0045','0046','0047','0048','0049','0050',
        '0051','0052','0053','0054','0055','0056','0057','0058','0059','0060',
    ],
//three
    [
        '0001','0002','0003','0004','0005','0006','0007','0008','0009','0010',
        '0011','0012','0013','0014','0015','0016','0017','0018','0019','0020',
        '0021','0022','0023','0024','0025','0026','0027','0028','0029','0030',
        '0031','0032','0033','0034','0035','0036','0037','0038','0039','0040',
        '0041','0042','0043','0044','0045','0046','0047','0048','0049','0050',
        '0051','0052','0053','0054','0055','0056','0057','0058','0059','0060',
    ],
//four
    [
        '0001','0002','0003','0004','0005','0006','0007','0008','0009','0010',
        '0011','0012','0013','0014','0015','0016','0017','0018','0019','0020',
        '0021','0022','0023','0024','0025','0026','0027','0028','0029','0030',
        '0031','0032','0033','0034','0035','0036','0037','0038','0039','0040',
        '0041','0042','0043','0044','0045','0046','0047','0048','0049','0050',
        '0051','0052','0053','0054','0055','0056','0057','0058','0059','0060',
    ],
//five
    [
        '0001','0002','0003','0004','0005','0006','0007','0008','0009','0010',
        '0011','0012','0013','0014','0015','0016','0017','0018','0019','0020',
        '0021','0022','0023','0024','0025','0026','0027','0028','0029','0030',
        '0031','0032','0033','0034','0035','0036','0037','0038','0039','0040',
        '0041','0042','0043','0044','0045','0046','0047','0048','0049','0050',
        '0051','0052','0053','0054','0055','0056','0057','0058','0059','0060',
    ],
//Six
    [
        '0001','0002','0003','0004','0005','0006','0007','0008','0009','0010',
        '0011','0012','0013','0014','0015','0016','0017','0018','0019','0020',
        '0021','0022','0023','0024','0025','0026','0027','0028','0029','0030',
        '0031','0032','0033','0034','0035','0036','0037','0038','0039','0040',
        '0041','0042','0043','0044','0045','0046','0047','0048','0049','0050',
        '0051','0052','0053','0054','0055','0056','0057','0058','0059','0060',
    ],
//Join
    [
        '0001','0002','0003','0004','0005','0006','0007','0008','0009','0010',
        '0011','0012','0013','0014','0015','0016','0017','0018','0019','0020',
        '0021','0022','0023','0024','0025','0026','0027','0028','0029','0030',
        '0031','0032','0033','0034','0035','0036','0037','0038','0039','0040',
        '0041','0042','0043','0044','0045','0046','0047','0048','0049','0050',
        '0051','0052','0053','0054','0055','0056','0057','0058','0059','0060',
    ],
];


var bodyWidth = $("body").css("width");
$("p.items").css("width",(bodyWidth.substring(0,bodyWidth.length-2)-380)+"px");

//跑马灯循环
var tx;
var runtx;
//是否正在运行跑马灯
var isRun=true;
//是否跑马灯暂停状态
var pause =false;
//排名分组显示算法已经取消
//var ts=20
//默认跑马灯频率
var pl=10;
//程序是否开始运行用于判断程序是否开始运行
var isStart=false;
    
var zzs = "#98ff98";
//跑马灯音效
var runingmic=document.getElementById("runingmic");
runingmic.volume=0.5;
//中奖音效
var pausemic=document.getElementById("pausemic");
pausemic.volume=1.0;

var keyStatus=false;

//帮助对象
var readmeDialog = showReadme();

$("document").ready(function(){
    
    //初始化皮肤
    if(localStorage.getItem(lotteryPrefix+"pf"))
    {
        var    pf = localStorage.getItem(lotteryPrefix+"pf");
        dynamicLoading.css("./css/style"+pf+".css");
        $("#bodybg img").attr("src","./images/bodybg"+pf+".jpg");
        $("input[name=pf][value="+pf+"]").attr("checked",true);
        if(pf!=1){
            zzs="#ba3030";
        }
    }
    //初始化标题
    if(localStorage.getItem("title"))
    {
        $("#title").val(localStorage.getItem("title"));

    }

   $(".top").html($("#title").val()+"
"+"("+lotteryTitles[lotteryNumber]+")"); //频率模式本地存储 if(localStorage.getItem(lotteryPrefix+"ms")) { pl = localStorage.getItem(lotteryPrefix+"ms"); $("input[name=ms][value="+pl+"]").attr("checked",true); } //排名信息本地存储 if(localStorage.getItem(lotteryPrefix+"sequence")) { var ssHtml = localStorage.getItem(lotteryPrefix+"sequence"); $(".ss").html(ssHtml); } //custom lottery var customLotteryMembers = ['159*1059', '152*9392']; //创建item小方格 $.each(members, function(index, value){ if($.inArray(value, customLotteryMembers) >= 0) { customers.push(index); } var lm = []; $.each(lotteryPrefixes, function(index, value){ var temp = localStorage.getItem(value+"lotteryMembers"); if(temp) { lm = $.merge(lm, temp.split(',')); } }); var ignoreClassName = ''; if($.inArray(value, lm) >= 0) { ignoreClassName = ' ignore'; } $("p.items").append("

"+(++index)+"

"); }); //本地存储item宽度信息 if(localStorage.getItem(lotteryPrefix+"itemk")) { $("p.item").css("width",localStorage.getItem(lotteryPrefix+"itemk")+"px"); } //本地存储item高度信息 if(localStorage.getItem(lotteryPrefix+"itemg")) { $("p.item").css("height",localStorage.getItem(lotteryPrefix+"itemg")+"px"); $("p.item").css("line-height",localStorage.getItem(lotteryPrefix+"itemg")+"px"); } //回显设定item宽高 $("#itemk").attr("placeholder",$(".i1").css("width")); $("#itemg").attr("placeholder",$(".i1").css("height")); //初始化排序信息 $(".ss li").each(function(idx,item){ var num = $(item).attr("data-number"); $(".i"+num).addClass("ignore"); lotteryMembers.push(members[num]); localStorage.setItem(lotteryPrefix+"lotteryMembers", lotteryMembers); }); $("body").keyup(function(e){ keyStatus = false; }); //全局键盘事件监听 $("body").keydown(function(e){ if(isStart){ if(! keyStatus) { keyStatus=true; } else { return false; } } if(e.keyCode == 116 || e.keyCode == 8) { return true; } //按F1弹出帮助窗口 if(e.keyCode == 112) { e.preventDefault(); if($(".readme:hidden").size() > 0) readmeDialog.show(); else readmeDialog.close(); return false; } //ESC案件呼出隐藏菜单 if(e.keyCode == 27) { if($(".help:hidden").size() > 0) $(".help").show(); else $(".help").hide(); return false; } if(e.keyCode == 37) { $(".prev").click(); return false; } if(e.keyCode == 39) { $(".next").click(); return false; } //当程序出于暂停状态 if(pause) { //以下按键有效 数字键 0-9 和 小键盘 0-9 return true; } //存在未中奖用户切程序出于未开始运行状态执行开始方法 if((e.keyCode==32 || e.keyCode == 65) && $("p.item:not(.ignore)").size() != 0 && ! isStart) { isStart = !isStart; startApp(); return false; } if(e.keyCode == 32 || e.keyCode == 65) { //当所有抽奖号全部抽取完毕则销毁跑马和音效循环 if($("p.item:not(.ignore)").size() == 0) { clearInterval(tx); clearInterval(runtx); runingmic.puase(); alert("抽奖已经全部结束。"); return false; } //更新运行状态 isRun = !isRun; //如果项目出于运行状态 if(! isRun) { //deal customers var runCount = $(".ss>ol>li").size(); if(runCount >= 1 && lotteryNumber < 2 && customers.length > 0) { var randCustomer = Math.floor(Math.random() * customers.length); if($(".i"+customers[randCustomer]+".ignore").attr('data-index') != customers[randCustomer]) { $(".item.active").removeClass("active"); $("p.item:not(.ignore):not(.active).i"+customers[randCustomer]).addClass("active"); customers.splice(randCustomer, 1); } } //取得当前选中号码 var it = $(".item.active").attr('data-index'); //停止跑马灯 runingmic.pause(); //播放中奖音效 pausemic.currentTime = 0; pausemic.play(); //中奖号处理 var it = Number(it); $('.ss ol').append('
  • '+members[it]+":"+lotteryTitle+';
  • '); var dd = dialog({ title: '抽奖结果', content: '

    '+members[it]+' 恭喜您,抽得'+lotteryTitle+'!

    ', okValue: '确定', width:'1885', height:'850', ok: function(){ dd.close(); } }); dd.show(); lotteryMembers.push(members[it]); localStorage.setItem(lotteryPrefix+"lotteryMembers", lotteryMembers); localStorage.setItem(lotteryPrefix+"sequence",$(".ss").html()); $(".item.active").addClass("ignore"); $(".item.active").pulsate({ color: zzs, //#98ff98 repeat: 5 }); } else { $(".active").removeClass("active"); runingmic.play(); } } e.preventDefault(); }); //打开高级设置窗口 $("a.config").click(function(){ pause=true; runingmic.pause(); var d = dialog({ title: '抽奖参数设定', content: $(".model"), okValue: '确定', ok: function(){ if($("#reset:checked").val() && confirm("点击确定将清空抽奖结果。")){ localStorage.removeItem(lotteryPrefix+"sequence"); localStorage.removeItem(lotteryPrefix+"lotteryMembers"); } if($("#itemk").val()){ localStorage.setItem(lotteryPrefix+"itemk", $("#itemk").val()); } if($("#itemg").val()){ localStorage.setItem(lotteryPrefix+"itemg", $("#itemg").val()); } localStorage.setItem("title", $("#title").val()); localStorage.setItem(lotteryPrefix+"ms", $("input[name=ms]:checked").val()); localStorage.setItem(lotteryPrefix+"pf", $("input[name=pf]:checked").val()); window.location.reload(); }, onclose: function(){ pause = false; } }); d.show(); }); //清除错误中奖号 $("body").on("click",".item.ignore",function(){ if(confirm("点击确定将清除错误中奖号。")) { $("li[data-number="+$(this).attr('data-index')+"]").remove(); $(this).removeClass("active ignore"); localStorage.setItem(lotteryPrefix+"sequence",$(".ss").html()); localStorage.removeItem(lotteryPrefix+"lotteryMembers"); } else { } }); }); //程序开始入口 function startApp(){ //开始播放跑马灯音效 runingmic.play(); //产生随机数临时变量 var rand = 0; //存储上一次随机数的临时变量 var prenum; tx = setInterval(function(){ if(isRun){ while(true){ rand=Math.floor(Math.random() * ( $("p.item:not(.ignore)").size())); if(rand == 0 || rand != prenum){break;} } prenum = rand; $(".item.active").removeClass("active"); $("p.item:not(.ignore):not(.active)").eq(rand).addClass("active"); } }, pl); runtx = setInterval(function(){runingmic.currentTime = 0;},1000); } /** * 显示帮助信息 * * @returns dialog */ function showReadme() { return dialog({ title: '帮助信息', content: $(".readme") , width:'400px', okValue: '关闭', ok:function(){ }, onclose: function () { pause=false; } }); } var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argument "path" is required !'); } var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = path; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(link); }, js: function(path){ if(!path || path.length === 0){ throw new Error('argument "path" is required !'); } var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = path; script.type = 'text/javascript'; head.appendChild(script); } }
    PHP中文网
    PHP中文网

    认证高级PHP讲师

    全部回复(8)
    阿神

    正常逻辑不应该是直接抽出中奖的号码吗,跑马灯什么的只是前端的展示效果而已,实际上在轮转的时候中奖号码早就确定了才对

    高洛峰

    最简单的思路,如果命中到''了,就再递归执行一次抽奖方法,直到非''的号命中为止.理论上有几毫秒的延迟,实际上人类是无法感知的.

    实话讲,你这代码看得太累了,不是很方便调整,只能简单列下.

    //产生一个中奖号,注意这里的lotteryType为中奖类型(一等奖,二等奖),我暂未看明白哪里取
    var pickOne = function(lotteryType){
        var picked = Math.floor(Math.random() * customers.length);
        //如果命中到'',则递归执行
        if(members[lotteryType][picked] == ''){
            return pickOne(lotteryType);
        }
        return picked;
    } 
    
    //改造下你代码这句:
    var randCustomer = Math.floor(Math.random() * customers.length);
    //改为:
    var randCustomer = pickOne(lotteryType);
    
    黄舟

    我大致了解题主的思路了.

    用两个数组去存就可以了:

    allMember: [
        {id: 0, isGolded: false},
        ...
        {id: 59, isGolded: false},
    ];//所有 共60
    
    secMember: [
        {id: 0, isGolded: false},
        ...
        {id: 47, isGolded: false},
    ];//所有 共48 id是谁由你自己去对应.

    抽前三个的时候 以secMember去抽, 同时修改其中奖状态, 以及allMember中对应那个人的isGolded

    补充说明:
    首页的显示中奖信息的, 遍历allMember即可, 判断是否已经中过奖(isGolded);
    抽奖顺序任意, 只要考虑当前要抽的奖项是 部分人secMember 还是所有人allMember,
    抽奖时, 先filter出未中奖的人(评论中给出了方法). 然后随机抽取.
    选人结束后 同时修改其在 secMember 和 allMember中对应的isGolded字段为true.

    伊谢尔伦

    跑马灯不是可以指定抽奖位号吗,比如排除2,4后的1,3,5,然后你随机数的时候就在这几个里边随机就好了。
    终于知道宝宝年会为什么总是抽不到奖了,每次都从我身边滑过,泪牛满面。

    黄舟

    这想法有问题啊

    目的是为了让刚到不久的员工排除在外,又不让他们看到

    前端的代码随便看了,要是不想让他们看到,得借助后端了吧

    黄舟

    如果不能让别人看到得结合后端来写了啊...

    高洛峰

    中奖号码本来就是后端搞定的,前端就只是负责展示效果而已,最多加点特效之类的。

    之前也做了公司的一个年会抽奖的展示的页面,号码之类的根本就没前端啥事,都是通过数据请求从后端来的。

    大家讲道理

    到时候年会的时候现场解析代码就爽了。非要做这种奇葩事

    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号