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和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
浅谈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
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
javascript整除实现代码
2010/11/23 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
vue中如何使用ztree
2018/02/06 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
Python标准异常和异常处理详解
2015/02/02 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
如何在python中写hive脚本
2019/11/08 Python
python dict如何定义
2020/09/02 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
小学教师的个人自我鉴定
2013/10/26 职场文书
语文教育专业应届生求职信
2013/11/23 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
关于爱国的标语
2014/06/24 职场文书
超市工作总结范文2014
2014/12/19 职场文书
自我评价优缺点范文
2015/03/11 职场文书
2015年教务工作总结
2015/05/23 职场文书
图书借阅制度范本
2015/08/06 职场文书
《角的度量》教学反思
2016/02/18 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
js 数组 fill() 填充方法
2021/11/02 Javascript