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语句中的CDATA标签的意义
May 09 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 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 return语句的另一个作用
2014/07/30 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
Prototype Object对象 学习
2009/07/12 Javascript
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
js中document.write的那点事
2014/12/12 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
express启用https使用小记
2019/05/21 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
发布你的Python模块详解
2016/09/15 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
药剂专业学生求职信范文
2013/12/28 职场文书
活动总结格式范文
2014/04/26 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
反邪教教育心得体会
2016/01/15 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
python自动化测试之Selenium详解
2022/03/13 Python