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 DOM学习第四章 getElementByTagNames
Feb 19 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
Element PageHeader页头的使用方法
Jul 26 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
Javascript类型判断相关例题及解析
Aug 26 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
vue.js的安装方法
2017/05/12 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
怎样比较两个类型为String的字符串
2016/08/17 面试题
个人自我鉴定写法
2013/11/30 职场文书
毕业学生推荐信
2013/12/01 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
小学生演讲稿大全
2014/04/25 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
自荐信格式模板
2015/03/27 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
各种货币符号快捷输入
2022/02/17 杂记
asyncio异步编程之Task对象详解
2022/03/13 Python
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers