js实现按座位号抽奖

2019-11-19 16:55:20

字体：大中小

来源：转载

供稿：网友

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

实现思路如下：

<!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>

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

上一篇：JavaScript结合HTML DOM实现联动菜单

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