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中Array 对象相关的几个方法
Dec 22 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 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
mysql+php分页类(已测)
2008/03/31 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
PHP自定义错误用法示例
2016/09/28 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中内建函数的简单用法说明
2016/05/05 Python
浅析python协程相关概念
2018/01/20 Python
pandas取出重复数据的方法
2019/07/04 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
外贸业务员的岗位职责
2013/11/23 职场文书
青年志愿者活动感想
2015/08/07 职场文书