目录
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()使选中的号显示列表存储在页面中的指定区域。
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
h2 {
text-align: center;
}
.box {
width: 600px;
margin: 50px auto;
display: flex;
font-size: 25px;
line-height: 40px;
}
.qs {
width: 450px;
height: 40px;
color: red;
}
.btns {
text-align: center;
}
.btns button {
width: 120px;
height: 35px;
margin: 0 50px;
}
.selected {
width: 600px;
margin: 50px auto;
display: flex;
font-size: 25px;
line-height: 40px;
}
.list {
color: red;
}
</style>
</head>
<body>
<h2>随机抽奖</h2>
<div class="box">
<span>电话号码是：</span>
<div class="qs">这里显示获奖电话号码</div>
</div>
<div class="btns">
<button class="start">开始</button>
<button class="end">结束</button>
</div>
<div class="selected">
<span>获奖电话号码：</span>
<div class="list"></div>
</div>
<script>
// 随机生成11位电话号码的函数
function generatePhoneNumber() {
var phoneNumber = "1";
for (var i = 0; i < 9; i++) {
phoneNumber += Math.floor(Math.random() * 10);
}
return phoneNumber;
}
// 生成11位电话号码的数组
var phoneNumberArr = []; // 存储所有电话号码
var selectedArr = []; // 存储选中的电话号码
for (var i = 0; i < 11; i++) { // 生成11个随机电话号码
phoneNumberArr.push(generatePhoneNumber());
}
// 定时器的全局变量
let timerId = 0;
// 随机号要全局变量
let random = 0;
// 业务1.开始按钮模块
const qs = document.querySelector('.qs');
// 1.1 获取开始按钮对象
const start = document.querySelector('.start');
// 1.2 添加点击事件
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);
});
// 2. 关闭按钮模块
const end = document.querySelector('.end');
end.addEventListener('click', function () {
clearInterval(timerId);
selectedArr.push(phoneNumberArr.splice(random, 1)[0]);
showSelectedArr();
});
// 展示所有中奖号码的函数
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);
}
}
</script>
</body>
</html>
