昨天开年会的时候看到一个段子说唯品会年会抽奖,结果大奖都被写抽奖程序的部门得了,CTO现场review代码。

简单想了一下抽奖程序的实现,花了十几分钟写了一下,主要用到的知识有数组添加删除,以及ES5 数组新增的indexOf,filter方法,

为了刷新页面后仍能保存已中奖记录,用了localStorage存盘。

刚开始是用随机数直接取编号,发现要剔除已中奖的人很麻烦,如果重复要递归调用,如果中奖的人太多到最后随机数取到已中奖的人概率太大,所以换用两个数组实现,一个记录已中奖的号码,一个记录未中奖的号码,已中奖的从另一个数组剔除就行,就不存在递归调用的情况。

具体实现如下:

  1. var start=1,end=20,luckyList=[],futureList=[];//luckyList表示已获奖的人,futureList表示尚未抽中的人,start,end表示奖券起止编号
  2.  
  3. //先初始化一下所有人员编号的数组
  4. for(var i=start;i<=end;i++){
  5. futureList.push(i);
  6. }
  7. //如果刷新了页面,从localStoreage中恢复
  8. if(localStorage.getItem("lucky")){
  9. luckyList=localStorage.getItem("lucky").split(",");
  10. futureList=futureList.filter(function(item){
  11. return luckyList.indexOf(item)==-1;
  12. })
  13. console.log(futureList)
  14. }
  15.  
  16. //抽奖函数,每运行一次,产生一个幸运号码
  17. function raffle(){
  18. var num= Math.random()*futureList.length;
  19. num=Math.floor(num);
  20. var idx=futureList.indexOf(num);
  21. var result= futureList.splice(idx,1)[0].toString();
  22. luckyList.push(result);
  23. localStorage.setItem("lucky",luckyList);
  24. console.log("抽奖结果:",result);
  25.  
  26. }
  27. //清除localstorge,如果要复位程序执行此函数
  28. function clear(){
  29. localStorage.setItem("lucky","");
  30.  
  31. }
  32.  
  33. raffle();

javascript实现抽奖程序的更多相关文章

  1. javascript 转盘抽奖代码和计数器代码

    要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下  看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究...  效果预览: 一.模拟抽奖的实 ...

  2. 使用 JavaScript 中的 window 对象执行计时操作,完成一个抽奖程序

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 window 对象执行计时操作,完成一个抽奖程序 实现思路: 在 HTML 页面中放置背景图片.转盘和指针 3 张图片,并设置指 ...

  3. 简单的javascript抽奖程序

    <html>  <head>   <title>手机号码抽奖程序</title>   <script>    //声明一个数组装住号码,可根 ...

  4. jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

    jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  5. 一个好玩的jq+php实现转盘抽奖程序

    前台页面: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <met ...

  6. jQuery幸运大转盘_jQuery+PHP抽奖程序

    http://www.thinkphp.cn/code/1153.html 网上转盘抽奖程序大多是flash完成的,而本文使用jQuery和PHP来实现转盘抽奖程序. 若是想看更多js特效.网站源码. ...

  7. 使用jQuery+PHP+Mysql实现抽奖程序

    抽奖程序在实际生活中广泛运用,由于应用场景不同抽奖的方式也是多种多样的.本文将采用实例讲解如何利用jQuery+PHP+Mysql实现类似电视中常见的一个简单的抽奖程序. 查看演示 本例中的抽奖程序要 ...

  8. .net+mssql制作抽奖程序思路及源码

    近期一直在研究数据库,刚好有个项目要做抽奖程序,恩,拿来练练手吧. 抽奖程序: 思路整理,无非就是点一个按钮,然后一个图片旋转一会就出来个结果就行了,可这个程序的要求不是这样的,是需要从数据库中随机抽 ...

  9. 幸运大转盘-jQuery+PHP实现的抽奖程序

    目前好多网站上应用的转盘抽奖程序大多是基于flash的,而本文结合实例将使用jQuery和PHP来实现转盘抽奖程序,为了便于理解,作者分两部分来讲解,本文讲解第一部分,侧重使用jQuery实现转盘的转 ...

随机推荐

  1. [AHK]输入法状态提示,中文状态提示“中”,英文状态提示“EN”[转]

    测试中发现使用小鹤双拼,如果不是使用shift切换中英文,效果不理想,留下此文章做个标记 https://www.autoahk.com/archives/8755 输入法状态提示,中文状态提示&qu ...

  2. Django(十六)基于模板的登录案例:登录装饰器、csrf攻击方式及防护、ajax的Post 的csrf开启写法、生成验证码、加验证码登录、反向解析+传参

    一.csrf攻击 1.1 csrf攻击(跨站请求伪造) [csrf攻击即]:通过第3方网站,伪造请求(前提条件是你已经登录正常网站,并保存了session或cookie登录信息且没有退出),第三方网站 ...

  3. arm linux 移植 udhcp 与 使用

    背景 在一些网络环境下,需要静态IP不够现实,需要使用DHCP进行自动获取IP地址. udhcpc是一个面向嵌入式系统的非常小的DHCP客户端,字母的缩写微μ- DHCP -客户端client(μDH ...

  4. Adapter之spinner

    前言: 在写代码当中有时候会用到下拉列表,下面我们讲一下spinner 正文: 因为比较简单,和之前的listView很像,所以直接上代码 <Spinner android:layout_wid ...

  5. docker安装mysql中注意事项

    前言 怎么安装docker和拉mysql镜像不是本文的重点,在这里我主要讲我安装mysql容器的三个注意事项:启动容器, 修改密码,远程登录 run容器 docker run -di --name f ...

  6. linux(centos6.9)下使用yum安装mysql,及启动MySQL等

    查看系统自带的mysql版本:rpm -qa | grep mysql 卸载mysql:rpm -e mysql-libs-5.1.73-8.el6_8.x86_64 --nodeps 1. 安装my ...

  7. ReadAsm2

    首先查看题目 下载文档之后用虚拟机打开(我用的是Kali Linux) 推测应该是对这个func函数反汇编结果应该就出来了 用c写一下算出结果 #include<bits/stdc++.h> ...

  8. 【HITB GSEC CTF 2017】1000levels

    https://files.cnblogs.com/files/p4nda/498a3f10-8976-4733-8bdb-30d6f9d9fdad.gz #通过阅读天枢战队大佬们的wp调试的结果 首 ...

  9. 019.CI4框架CodeIgniter辅助函数类之:Array数组查询

    01. 数组辅助函数,可以方便的查看数组内部的成员,用法如下图所示: <?php namespace App\Controllers; class Hello extends BaseContr ...

  10. UVA - 10129 Play on Words(欧拉回路)

    题意:将n个单词排成一个序列,保证相邻单词相邻处字母相同. 分析:每个单词看做一条有向边,字母为点,并查集看图是否连通,因为是有向图,所以最多只能有两个点入度不等于出度,且这两个点一个入度比出度大1, ...