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 radio 联动效果
Mar 04 Javascript
理解Javascript_10_对象模型
Oct 16 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 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
php获取网页上所有链接的方法
2015/04/03 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
PHP 错误处理机制
2015/07/06 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
JavaScript浏览器选项卡效果
2010/08/25 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
python如何将多个PDF进行合并
2019/08/13 Python
Python Subprocess模块原理及实例
2019/08/26 Python
Python post请求实现代码实例
2020/02/28 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
美国在线购物频道:Shop LC
2019/04/21 全球购物
导游实习生自荐书
2014/01/28 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
开工仪式策划方案
2014/05/23 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
雾霾停课通知
2015/04/24 职场文书
离婚起诉状范本
2015/05/19 职场文书