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 callBack 返回前一页的js方法
Nov 30 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
javaScript语法总结
Nov 25 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
浅谈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 isset()与empty()的使用区别详解
2010/08/29 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
javascript处理table表格的代码
2010/12/06 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
javascript类型转换示例
2014/04/29 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
详解python中sort排序使用
2019/03/23 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
AC Lens:购买隐形眼镜
2017/02/26 全球购物
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
社区食品安全实施方案
2014/03/28 职场文书
2014年党支部学习材料
2014/05/19 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
加强党性修养心得体会
2016/01/21 职场文书
redis中lua脚本使用教程
2021/11/01 Redis