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 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
nuxt引入组件和公共样式的操作
Nov 05 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 Javascript
微信小程序实现登录注册功能
Dec 29 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
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
json 入门基础教程 推荐
2009/10/31 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
js实现点击烟花特效
2020/10/14 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
Python3中的2to3转换工具使用示例
2015/06/12 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
django实现类似触发器的功能
2019/11/15 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
selenium自动化测试入门实战
2020/12/21 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
学生干部学习的自我评价
2014/02/18 职场文书
慰问信格式
2015/02/14 职场文书
2019银行竞聘书
2019/06/21 职场文书
python某漫画app逆向
2021/03/31 Python