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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
7个jQuery最佳实践
Jan 12 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 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中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
python for 循环获取index索引的方法
2019/02/01 Python
python绘制直方图和密度图的实例
2019/07/08 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
八一建军节感言
2014/02/28 职场文书
服务标语口号
2014/07/01 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
小学英语复习计划
2015/01/19 职场文书
酒店宣传语大全
2015/07/13 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers