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类的封装及实现代码
Dec 02 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 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实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
微信小程序 同步请求授权的详解
2017/08/04 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
python解析xml模块封装代码
2014/02/07 Python
Python中join和split用法实例
2015/04/14 Python
浅谈对yield的初步理解
2017/05/29 Python
python中pika模块问题的深入探究
2018/10/13 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
Python3实现定时任务的四种方式
2019/06/03 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
班组长安全职责
2014/01/05 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
法定授权委托证明书
2015/06/18 职场文书
三八节祝酒词
2015/08/11 职场文书