javascript实现抽奖程序的简单实例

 更新时间:2016年06月07日 15:47:44   投稿:jingxian  
下面小编就为大家带来一篇javascript实现抽奖程序的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

昨天开年会的时候看到一个段子说唯品会年会抽奖,结果大奖都被写抽奖程序的部门得了,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实现抽奖程序的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • js中Generator函数的深入讲解

    js中Generator函数的深入讲解

    这篇文章主要给大家介绍了关于js中Generator函数的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Javascript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • 深入探究V8引擎的底层原理

    深入探究V8引擎的底层原理

    V8引擎是一款由Google开发的JavaScript引擎,V8引擎采用了众多的优化措施,使得其在性能上得到了极大的提升,能够高效地执行JavaScript代码,本文将和大家一起探讨一下V8引擎底层原理,探究其优异性能之谜
    2023-06-06
  • JavaScript 预解析的4种实现方法解析

    JavaScript 预解析的4种实现方法解析

    这篇文章主要介绍了JavaScript 预解析的4种实现方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • js实现的点击超链显示隐藏层

    js实现的点击超链显示隐藏层

    js实现的点击超链显示隐藏层...
    2007-05-05
  • js 小贴士一星期合集

    js 小贴士一星期合集

    js 小贴士一星期合集,学习js的朋友可以参考下。
    2010-04-04
  • 纯JS实现的读取excel文件内容功能示例【支持所有浏览器】

    纯JS实现的读取excel文件内容功能示例【支持所有浏览器】

    这篇文章主要介绍了纯JS实现的读取excel文件内容功能,结合实例形式分析了基于js相关插件进行Excel文件读取的相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • 简单聊聊JavaScript的事件循环机制

    简单聊聊JavaScript的事件循环机制

    前端开发的童鞋应该都知道,JavaScript是一门单线程的脚本语言,这就意味着JavaScript 代码在执行的时候,只有一个主线程来执行所有的任务,同一个时间只能做同一件事情,这篇文章主要给大家介绍了关于JavaScript事件循环机制的相关资料,需要的朋友可以参考下
    2022-03-03
  • Javascript中的return作用及javascript return关键字用法详解

    Javascript中的return作用及javascript return关键字用法详解

    本文给大家介绍Javascript中的return作用及javascript return关键字用法详解,对于大家学习javascript中的return知识有所帮助,感兴趣的朋友一起学习吧
    2015-11-11
  • 序列化模块json代码实例详解

    序列化模块json代码实例详解

    这篇文章主要介绍了序列化模块json代码实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • Code:loadScript( )加载js的功能函数

    Code:loadScript( )加载js的功能函数

    Code:loadScript( )加载js的功能函数...
    2007-02-02

最新评论