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和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 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数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
Javascript 刷新全集常用代码
2009/11/22 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
easyui validatebox验证
2016/04/29 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
python接口自动化框架实战
2020/12/23 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
经济学博士求职自荐信范文
2013/11/23 职场文书
大学军训感言400字
2014/03/11 职场文书
党的群众路线学习材料
2014/05/16 职场文书
师范大学生求职信
2014/06/13 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
法律进社区活动总结
2015/05/07 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android