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 相关文章推荐
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
两个开源的Php输出Excel文件类
2010/02/08 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
浅谈PHP的反射机制
2016/12/15 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
js 内存释放问题
2010/04/25 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
requireJS使用指南
2016/04/27 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
深入理解Angular4中的依赖注入
2017/06/07 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
python编程开发之日期操作实例分析
2015/11/13 Python
python 内置函数filter
2017/06/01 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
python tkinter窗口最大化的实现
2019/07/15 Python
简单了解python数组的基本操作
2019/11/26 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
Python-split()函数实例用法讲解
2020/12/18 Python
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
家教广告词
2014/03/19 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
实习护士自荐信
2015/03/25 职场文书
八月迷情观后感
2015/06/11 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
anaconda python3.8安装后降级
2021/06/11 Python