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();
javascript实现抽奖程序的更多相关文章
- javascript 转盘抽奖代码和计数器代码
要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下 看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究... 效果预览: 一.模拟抽奖的实 ...
- 使用 JavaScript 中的 window 对象执行计时操作,完成一个抽奖程序
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 window 对象执行计时操作,完成一个抽奖程序 实现思路: 在 HTML 页面中放置背景图片.转盘和指针 3 张图片,并设置指 ...
- 简单的javascript抽奖程序
<html> <head> <title>手机号码抽奖程序</title> <script> //声明一个数组装住号码,可根 ...
- jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现
jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- 一个好玩的jq+php实现转盘抽奖程序
前台页面: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <met ...
- jQuery幸运大转盘_jQuery+PHP抽奖程序
http://www.thinkphp.cn/code/1153.html 网上转盘抽奖程序大多是flash完成的,而本文使用jQuery和PHP来实现转盘抽奖程序. 若是想看更多js特效.网站源码. ...
- 使用jQuery+PHP+Mysql实现抽奖程序
抽奖程序在实际生活中广泛运用,由于应用场景不同抽奖的方式也是多种多样的.本文将采用实例讲解如何利用jQuery+PHP+Mysql实现类似电视中常见的一个简单的抽奖程序. 查看演示 本例中的抽奖程序要 ...
- .net+mssql制作抽奖程序思路及源码
近期一直在研究数据库,刚好有个项目要做抽奖程序,恩,拿来练练手吧. 抽奖程序: 思路整理,无非就是点一个按钮,然后一个图片旋转一会就出来个结果就行了,可这个程序的要求不是这样的,是需要从数据库中随机抽 ...
- 幸运大转盘-jQuery+PHP实现的抽奖程序
目前好多网站上应用的转盘抽奖程序大多是基于flash的,而本文结合实例将使用jQuery和PHP来实现转盘抽奖程序,为了便于理解,作者分两部分来讲解,本文讲解第一部分,侧重使用jQuery实现转盘的转 ...
随机推荐
- redis集群JedisCluster连接关闭问题
JedisCluster连接关闭问题 set方法为例 //伪代码 JedisCluster jedisCluster = new JedisCluster(); jedisCluster.set(&q ...
- Windows驱动开发-符号链接和设备名
windows下的设备是以"\Device\[设备名]”形式命名的. 例如磁盘分区的C盘,D盘的设备名称就是 "\Device\HarddiskVolume2” "\De ...
- Mac 终端启动AVD模拟器
cd ~/Library/Android/sdk/tools ./emulator -list-avds // 列出av列表 Nexus_5X_API_26 ./emulator @Nexus_5X_ ...
- Unity游戏开发面试基础知识
面试第一次知识总结: 一.Unity基本操作 1.unity提供哪几种光源? 点光源.平行光.聚光灯.区域光. 2.物体发生碰撞的必要条件什么? 两个物体必须有碰撞体Collider组件,一个物体上必 ...
- HiBench成长笔记——(4) HiBench测试Spark SQL
很多内容之前的博客已经提过,这里不再赘述,详细内容参照本系列前面的博客:https://www.cnblogs.com/ratels/p/10970905.html 和 https://www.cnb ...
- springCloud 之 Eureka服务治理机制及代码运行
服务提供者 服务注册: 服务提供者在启动的时候通过发送Rest请求的方式将自己注册到Eureka Server上,同时带上了自身服务的一些元数据信息.Eureka Server在收到这个请求后,将元数 ...
- JS 判断是否为安卓或IOS系统
其实很简单,代码如下<script type="text/javascript"> var device = navigator.userAgent; || devic ...
- linux下python开发环境的安装
1.准备编译环境 yum groupinstall 'Development Tools' yum install zlib-devel bzip2-devel openssl-devel ncurs ...
- 047、Java中使用if…else if…else判断
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- 利用jQuery实现PC端href生效,移动端href失效
今天要写一个功能,记录一下吧.if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){ $('.item-a').attr('href' ...