javascript实现抽奖程序的简单实例


Posted in Javascript onJune 07, 2016

昨天开年会的时候看到一个段子说唯品会年会抽奖,结果大奖都被写抽奖程序的部门得了,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具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
浅谈javascript中new操作符的原理
Jun 07 #Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 #Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 #Javascript
浅析BootStrap栅格系统
Jun 07 #Javascript
浅谈jQuery 选择器和dom操作
Jun 07 #Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 #Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 #Javascript
You might like
Php部分常见问题总结
2006/10/09 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python 数据加密代码
2008/12/24 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
python八皇后问题的解决方法
2018/09/27 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
Python restful框架接口开发实现
2020/04/13 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
银行领导证婚词
2014/01/11 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
高三生物教学反思
2014/01/25 职场文书
售后服务承诺书模板
2014/05/21 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
银行求职信模板
2015/03/20 职场文书
学生退学证明
2015/06/23 职场文书
Selenium浏览器自动化如何上传文件
2022/04/06 Python
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技