这是公司年会抽奖的一个程序,其中特等奖,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);
}
}
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
正常逻辑不应该是直接抽出中奖的号码吗,跑马灯什么的只是前端的展示效果而已,实际上在轮转的时候中奖号码早就确定了才对
最简单的思路,如果命中到''了,就再递归执行一次抽奖方法,直到非''的号命中为止.理论上有几毫秒的延迟,实际上人类是无法感知的.
实话讲,你这代码看得太累了,不是很方便调整,只能简单列下.
我大致了解题主的思路了.
用两个数组去存就可以了:
抽前三个的时候 以secMember去抽, 同时修改其中奖状态, 以及
allMember中对应那个人的isGolded补充说明:
首页的显示中奖信息的, 遍历allMember即可, 判断是否已经中过奖(isGolded);
抽奖顺序任意, 只要考虑当前要抽的奖项是 部分人secMember 还是所有人allMember,
抽奖时, 先filter出未中奖的人(评论中给出了方法). 然后随机抽取.
选人结束后 同时修改其在 secMember 和 allMember中对应的isGolded字段为true.
跑马灯不是可以指定抽奖位号吗,比如排除2,4后的1,3,5,然后你随机数的时候就在这几个里边随机就好了。
终于知道宝宝年会为什么总是抽不到奖了,每次都从我身边滑过,泪牛满面。
这想法有问题啊
前端的代码随便看了,要是不想让他们看到,得借助后端了吧
如果不能让别人看到得结合后端来写了啊...
中奖号码本来就是后端搞定的,前端就只是负责展示效果而已,最多加点特效之类的。
之前也做了公司的一个年会抽奖的展示的页面,号码之类的根本就没前端啥事,都是通过数据请求从后端来的。
到时候年会的时候现场解析代码就爽了。非要做这种奇葩事