javascript实现抽奖程序

昨天开年会的时候看到一个段子说唯品会年会抽奖,结果大奖都被写抽奖程序的部门得了,CTO现场review代码。

简单想了一下抽奖程序的实现,花了十几分钟写了一下,主要用到的知识有数组添加删除,以及ES5 数组新增的indexOf,filter方法,

为了刷新页面后仍能保存已中奖记录,用了localStorage存盘。

刚开始是用随机数直接取编号,发现要剔除已中奖的人很麻烦,如果重复要递归调用,如果中奖的人太多到最后随机数取到已中奖的人概率太大,所以换用两个数组实现,一个记录已中奖的号码,一个记录未中奖的号码,已中奖的从另一个数组剔除就行,就不存在递归调用的情况。

具体实现如下:

var start=1,end=20,luckyList=[],futureList=[];//luckyList表示已获奖的人,futureList表示尚未抽中的人,start,end表示奖券起止编号

//先初始化一下所有人员编号的数组
for(var i=start;i<=end;i++){
futureList.push(i);
}
//如果刷新了页面,从localStoreage中恢复
if(localStorage.getItem("lucky")){
luckyList=localStorage.getItem("lucky").split(",");
futureList=futureList.filter(function(item){
return luckyList.indexOf(item)==-1;
})
console.log(futureList)
}

//抽奖函数,每运行一次,产生一个幸运号码
function raffle(){
var num= Math.random()*futureList.length;
num=Math.floor(num);
var idx=futureList.indexOf(num);
var result= futureList.splice(idx,1)[0].toString();
luckyList.push(result);
localStorage.setItem("lucky",luckyList);
console.log("抽奖结果:",result);

}
//清除localstorge,如果要复位程序执行此函数
function clear(){
localStorage.setItem("lucky","");

}

raffle();

时间: 2024-10-17 09:04:32

javascript实现抽奖程序的相关文章

JavaScript简单抽奖程序的实现及代码

JavaScript简单抽奖程序的实现及代码 1.需求说明 某公司年终抽奖,需要有如下功能 1)可以根据实际情况设置到场人数的最大值 2) 点击"开始",大屏幕滚动,点击"停止",获奖者的编号出现在大屏幕上 3)在界面里显示全部奖项获奖人编号 4)不重复获奖 5)不会因为输入错误而导致抽奖结果异常. 2.代码呈上 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">

jQuery实现圆盘活动抽奖程序效果

<script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jQueryRotate.2.2.js"></script> <script type="text/javascript" src="jqu

jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

在线实例 查看演示 完整代码 <!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

公司新年网页抽奖程序 数字抽奖游戏JS特效

<!doctype html> <html> <head> <meta charset="utf-8"> <title>新年网页抽奖程序_河北电动叉车|石家庄展柜制作</title> <style type="text/css"> * {margin:0; padding:0;} ul,li {list-style-type:none;} body {overflow:hidden;

一个简单的抽奖程序

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>抽奖程序</title> 6 <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script> 7

年会抽奖程序的一些总结

起源 2019年年会的到来,当然免不了激动人心的抽奖环节啦,那直接延用上一年的抽奖程序吧,然而Boss希望今年的抽奖程序能够能让所有人都参与进来,一起来抢有限奖品,先到先得,而不是站在那里盯着屏幕. OK,程序内容大概是这样子,每个人在手机浏览器打开抽奖程序界面,系统会随机给个数字,谁戳屏幕上的圆形最快最准,就能参与抽奖活动,有多少奖品就有多少场battle(仅限手机浏览器打开 & 每人仅限获得一个奖品) 重要的是,年会之前得把程序公布出来,让其他同事想办法作弊,硬件作弊和软件作弊都允许,我们主

JavaScript中国象棋程序(0) - 前言

"JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.希望通过这个系列,我们对博弈程序的算法有一定的了解.同时,我们也将构建出一个不错的中国象棋程序. JavaScript中国象棋程序系列共有9个部分: 0.JavaScript中国象棋程序(0)- 前言 1.JavaScript中国象棋程序(1)- 界面设计 2.JavaScript中国象棋程序(2)- 校验棋子走法 3.JavaScript中国象棋程序(3)- 电脑自动走棋 4.J

十分简单的年会抽奖程序

年会那个抽奖程序崩溃实在令人印象太深刻了,所以自己弄了一个简单版本的... data=[] #从数据库或者文件获取员工抽奖id,放到data iNum= raw_input("please input the numbers:\n")#抽几个人 # method= raw_input("please input the method:\n")#做所谓奇偶数抽奖,没意义 allwindata=[] while iNum: windata=[] for i in ran

java模拟一个抽奖程序

今天用一个程序模拟一个从1-32之间,随机抽取7组号码的抽奖程序 * 需要使用Java的图形界面知识 * 窗口  JFrame * 面板  JPanel * 显示文本信息的标签  JLabel * 文本框 JTextField * 按钮  JButton 还涉及到线程Thread 先看效果图: 但是这里留一个问题?就是去除重复数字(可以自己先实现,后期我会上传的) 下面看看代码,代码中有注释,不懂留言: package thread.test1; import java.awt.BorderLa