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 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
js 金额文本框实现代码
Feb 14 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 Javascript
vscode 调试 node.js的方法步骤
Sep 15 Javascript
浅谈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
NOT NULL 和NULL
2007/01/15 PHP
PHP时间和日期函数详解
2015/05/08 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
Django如何实现上传图片功能
2019/08/16 Python
Python matplotlib可视化实例解析
2020/06/01 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
在校生党员自我评价
2013/09/25 职场文书
函授毕业生自我鉴定
2013/11/06 职场文书
总经理助理工作职责
2014/02/06 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
优秀语文教师事迹
2014/05/18 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
2014年质量工作总结
2014/11/22 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js