编程 Javascript

js实现按座位号抽奖

Posted in Javascript onApril 05, 2017

最近一个项目需要实现一个按座位号抽奖的效果，抽奖现场有多个区域，抽奖时随机选取其中一个区域，再在这个区域中随机选取一排，最后在这排中随机选取一个座位号，区域、排号及座位号都不固定。

实现思路如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>抽奖</title>
</head>
<body>
  <p id="result"></p>
  <script>
    // 获取两个数之间的随机数
    function getRandom(min, max){
      var num = min + Math.floor(Math.random() * (max - min + 1));
      return num;
    }

    // 列举可以参加抽奖的座位号（第几区，第几排，第几列）
    var obj = {
      '001': [
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 11]
      ],
      '002': [
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
      ],
      '003': [
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
      ],
      '004': [
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
      ],
      '006': [
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
      ],
      '007': [
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
      ],
      '008': [
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]
      ],
      '009': [
        [1, 2, 3, 4, 5],
        [1, 2, 3, 4, 5],
        [1, 2, 3, 4, 5],
        [1, 2, 3, 4, 5],
        [1, 2, 3, 4, 5],
        [1, 2, 3, 4, 5],
        [1, 2, 3, 4, 5],
        [1, 2, 3, 4, 5],
        [1, 2, 3, 4],
      ],
      'vip1': [
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38]
      ],
      'vip2': [
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38]
      ],
      'vip3': [
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38],
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38]
      ]
    };
    // 从对象中随机获取一个区域（索引）
    var getAreaRandomIndex = getRandom(0, Object.keys(obj).length - 1);
    // 再在上面得到的区域中再随机获取第几排（索引）
    var getRowsRandomIndex = getRandom(0, obj[Object.keys(obj)[getAreaRandomIndex]].length - 1);
    // 最后在上面得到的第几排中再随机获取第几号（索引）
    var getcolsRandomIndex = getRandom(0, obj[Object.keys(obj)[getAreaRandomIndex]][getRowsRandomIndex].length -1);
    // ----- 通过上面索引得到确切的座位号 -----
    // 得到第几区
    var area = Object.keys(obj)[getAreaRandomIndex];
    // 得到第几排
    var rows = getRowsRandomIndex + 1;
    // 得到第几列
    var cols = obj[Object.keys(obj)[getAreaRandomIndex]][getRowsRandomIndex][getcolsRandomIndex];

    // 将结果显示在页面上
    document.getElementById('result').innerHTML = '第' + area + '区, 第' + rows + '排, 第' + cols + '号';

  </script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

js实现按座位号抽奖

- Author -

超级切图仔

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于jquery的内容循环滚动小模块（仿新浪微博未登录首页滚动微博显示）

Mar 28 Javascript

c#和Javascript操作同一json对象的实现代码

Jan 17 Javascript

原生JS可拖动弹窗效果实例代码

Nov 09 Javascript

javascript中通过arguments参数伪装方法重载

Oct 08 Javascript

自定义百度分享的分享按钮

Mar 18 Javascript

JavaScript在浏览器标题栏上显示当前日期和时间的方法

Mar 19 Javascript

jQuery使用CSS()方法给指定元素同时设置多个样式

Mar 26 Javascript

jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)

Oct 12 Javascript

详解如何实现一个简单的 vuex

Feb 10 Javascript

Vue实现active点击切换方法

Mar 16 Javascript

详解Angular6学习笔记之主从组件

Sep 05 Javascript

详解Vue组件插槽的使用以及调用组件内的方法

Nov 13 Javascript

Angularjs 实现移动端在线测评效果(推荐)

Apr 05 #Javascript

微信小程序中的onLoad详解及简单实例

Apr 05 #Javascript

微信小程序页面跳转如何实现传值

Apr 05 #Javascript

微信小程序数据遍历的实现

Apr 05 #Javascript

微信小程序图片绝对定位(背景图片)

Apr 05 #Javascript

JS实现复选框的全选和批量删除功能

Apr 05 #Javascript

Ajax验证用户名或昵称是否已被注册

Apr 05 #Javascript

You might like

ajax+php打造进度条 readyState各状态

2010/03/20 PHP

zend framework文件上传功能实例代码

2013/12/25 PHP

浅谈PHP中静态方法和非静态方法的相互调用

2016/10/04 PHP

比较全的JS checkbox全选、取消全选、删除功能代码

2008/12/19 Javascript

锋利的jQuery 要点归纳（三） jQuery中的事件和动画（下：动画篇）

2010/03/24 Javascript

Iframe自适应高度绝对好使的代码兼容IE,遨游，火狐

2011/01/27 Javascript

分享10篇优秀的jQuery幻灯片制作教程及应用案例

2011/04/16 Javascript

js页面跳转的常用方法整理

2013/10/18 Javascript

js实现带搜索功能的下拉框实时搜索实时匹配

2013/11/05 Javascript

jquery和javascript中如何将一元素的内容赋给另一元素

2014/01/09 Javascript

PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法

2015/03/30 Javascript

CSS图片响应式垂直水平居中

2015/08/14 Javascript

vue中mint-ui环境搭建详细介绍

2017/04/06 Javascript

vue移动端UI框架实现QQ侧边菜单组件

2018/03/09 Javascript

微信小程序云开发使用方法新手初体验

2019/05/16 Javascript

Vue实现商品详情页的评价列表功能

2019/09/04 Javascript

js获取 gif 的帧数的代码实例

2019/09/10 Javascript

JS实现骰子3D旋转效果

2019/10/24 Javascript

JavaScript 禁止用户保存图片的实现代码

2020/04/28 Javascript

[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21

2018/08/22 DOTA

python如何查看系统网络流量的信息

2016/09/12 Python

python爬虫入门教程--优雅的HTTP库requests（二）

2017/05/25 Python

Numpy数组转置的两种实现方法

2018/04/17 Python

Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能

2018/11/23 Python

使用Python中的reduce()函数求积的实例

2019/06/28 Python

pip 安装库比较慢的解决方法(国内镜像)

2019/10/06 Python

Python网络编程之使用TCP方式传输文件操作示例

2019/11/01 Python

Python底层封装实现方法详解

2020/01/22 Python

python numpy实现多次循环读取文件等间隔过滤数据示例

2020/03/14 Python

详解python变量与数据类型

2020/08/25 Python

Canvas实现贝赛尔曲线轨迹动画的示例代码

2019/04/25 HTML / CSS

如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度

2019/08/01 HTML / CSS

如何在Shell脚本中使用函数

2015/09/06 面试题

销售简历自我评价

2014/01/24 职场文书

客服专员岗位职责

2014/02/28 职场文书

《周恩来的四个昼夜》观后思想汇报范文两篇

2014/09/10 职场文书