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 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
jquery CSS选择器笔记
Mar 29 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 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 mail()函数使用及配置方法
2014/01/14 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
pandas值替换方法
2018/07/10 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
String和StringBuffer的区别
2015/08/13 面试题
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
省优秀教师事迹材料
2014/01/30 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
小学作文评语大全
2014/04/21 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
语文课外活动总结
2014/08/27 职场文书
出租车拒载检讨书
2015/01/28 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python