JavaScript实现随机抽奖

目录

1. 生成电话号码的函数

2. 随机生成电话号码的数组

3. 开始按钮模块

4. 关闭按钮模块

5. 展示中奖号码列表模块

---

是一个常见的互动活动，在线上线下的抽奖活动中都有出现过。

代码的主要功能是从一组随机生成的 11 位电话号码中，实现随机抽取号码直至列表为空，同时对已抽中的号码进行展示。该代码中主要包括如下要点：

1. 生成电话号码的函数

function generatePhoneNumber() {
  var phoneNumber = "1";
  for (var i = 0; i < 9; i++) {
    phoneNumber += Math.floor(Math.random() * 10);
  }
  return phoneNumber;
}
 

这部分JavaScript代码返回一个随机生成的 11 位电话号码，该电话号码通过循环生成 1–9 的数字，最后前加上数字“1”即成为 11 位的电话号码。

2. 随机生成电话号码的数组

var phoneNumberArr = [];
for (var i = 0; i < 11; i++) {
  phoneNumberArr.push(generatePhoneNumber());
}

这段 JavaScript 代码通过调用 generatePhoneNumber() 函数，向数组 phoneNumberArr 中添加随机生成的 11 个电话号码。准备将这组电话号码用于随机抽奖。

3. 开始按钮模块

const start = document.querySelector('.start');
start.addEventListener('click', function () {
  if (phoneNumberArr.length <= 1) {
    start.disabled = true;
    end.disabled = true;
    return;
  }
  timerId = setInterval(function () {
    random = Math.floor(Math.random() * phoneNumberArr.length);
    qs.innerHTML = phoneNumberArr[random];
  }, 100);
});

当用户启用开始按钮时，随机抽选手机号码的定时器将启动，定时器每次迭代都会生成一个随机索引(random)。由 phoneNumberArr 数组的长度随机生成 (Math.floor(Math.random()*phoneNumberArr.length))，页面展示抽中的随机号码(qs.innerHTML = phoneNumberArr[random]) 。最后当 phoneNumberArr 中未选出号码、只剩下1个或0个手机号码，界面上的开始按钮(start)和结束按钮(end)将被禁用（灰色显示），无法启用。

4. 关闭按钮模块

const end = document.querySelector('.end');

end.addEventListener('click', function () {
  clearInterval(timerId); // 停止定时器
  selectedArr.push(phoneNumberArr.splice(random, 1)[0]); // 记录中奖号码并清除已选编号
  showSelectedArr(); // 展示已选的中奖号码
});

停用关闭按钮 (end) 显示所选的局部中奖号码列表。其主要功能回收当random中發現產生範圍內的索引时，移除该随机号码 push() 例 selectedArr 数组中。换句话说( imageView:修改)是从 phoneNumberArr 中用 splice() 方法，移除该随机号码。

selectedArr 数组包含所有抽中的随机电话号码，并与方法showSelectedArr()一起使用，该方法输出所有抽奖号码和展现当发现的中奖号码。同时，使 selectedArr 数组的长度保持不变，防止随机号码重复抽中。因此，在关闭函数上加入 (phoneNumberArr.splice(random, 1)[0]) 之使选择的号码从源 List上清除，防止抽选重复号码。

5. 展示中奖号码列表模块

function showSelectedArr() {
  const list = document.querySelector('.list');
  list.innerHTML = '';
  for (var i = 0; i < selectedArr.length; i++) {
    const item = document.createElement('div');
    item.innerText = selectedArr[i];
    list.appendChild(item);
  }
}

JS 代码展示合并中奖电话号码滚动式表单的内容。当单击界面上的 add-button 按钮时，用语义上与 item 类别相似的 item 文本部件以每次 (i++) 迭代的方式生成并 insertHTMLBack() 添加至列表(LI)元素。该列表放置在列样式(.list)下).

本文概述了具体的实现逻辑，其主要目的是通过生成固定长度的数组，进而轮流随机出设有手机号码的元素，并用 splice() 移除成为赢家的手机号码；通过 push() 添加至另一固定数组选项卡中，并展示已选择的中奖号码。稳步使用 showSelectedArr(), 退出(clearInterval) 后， showSelectedArr()使选中的号显示列表存储在页面中的指定区域。

具体代码如下：

  
  
  
  



  
随机抽奖
  

    电话号码是：
    
这里显示获奖电话号码
  
  

    开始
    结束
  
  

    获奖电话号码：