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 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
JS求平均值的小例子
Nov 29 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
Angular2+如何去除url中的#号详解
Dec 20 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
微信小程序实现底部弹出框
Nov 18 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写的小东西
2006/12/06 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
php实现可运算的验证码
2015/11/10 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
JavaScript delete 属性的使用
2009/10/08 Javascript
JavaScript的public、private和privileged模式
2009/12/28 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
详谈js模块化规范
2017/07/07 Javascript
谈谈JS中的!!
2017/12/07 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
PyQt5每天必学之组合框
2018/04/20 Python
浅析python内置模块collections
2019/11/15 Python
一套带网友答案的.NET笔试题
2016/12/06 面试题
垃圾回收的优点和原理
2014/05/16 面试题
自我鉴定四大框架
2014/01/17 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
物资采购方案
2014/06/12 职场文书
上课迟到检讨书
2015/05/06 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript