基于JavaScript实现公平分组抽签算法与小程序开发

function shuffle(array) {
  const arr = [...array]; // 进行浅拷贝
  for (let i = arr.length - 1; i > 0; i--) { // 遍历数组元素
    const j = Math.floor(Math.random() * (i + 1)); // 生成随机下标
    [arr[i], arr[j]] = [arr[j], arr[i]]; // 交换位置
  }
  return arr; // 返回排序后的数组
}

const team = ['张三', '李四', '王五', '赵六', '钱七', '孙八']; // 假设有6名成员
const groupNum = 3; // 定义需要抽几组
const baseNum = Math.ceil(team.length / groupNum); // 计算每组包含的人数
console.log(baseNum); // 输出2

const team = ['张三', '李四', '王五', '赵六', '钱七', '孙八']; // 团队成员数组
const groupNum = 3; // 分组数
const baseNum = Math.ceil(team.length / groupNum); // 计算每组需要包含多少人
const shuffledTeam = shuffle(team); // 乱序排列团队成员 
let assignedCount = 0; // 计数器，记录已分配的人数
let groups = []; // 定义一个空数组，用来存放每个分组的成员
// 遍历随机排序后的团队成员列表，进行分组
shuffledTeam.forEach(member => {
  if (member.assigned) return; // 如果该成员已被分配，则跳过
  for (let i = 0; i < groupNum; i++) {
    const group = groups[i] || []; // 如果当前分组未定义，则将其初始值设为空数组
    if (group.length < baseNum && !group.includes(member)) { // 如果该分组未满员，并且该成员没有被分配到其他组内
      group.push(member); // 将该成员加入当前分组
      member.assigned = true; // 给该成员打上已分组标记
      assignedCount++; // 记录已分配人数
      groups[i] = group; // 将该分组重新赋值给原数组
      break; // 遍历下一个成员
    }
  }
});

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>分组抽签小程序</title>
  <script src="main.js"></script>
</head>
<body>
  <h1>分组抽签小程序</h1>
  <form id="form">
    <div>
      <label for="members">团队成员：</label>
      <textarea id="members" name="members" placeholder="请用英文半角逗号分隔不同的成员"></textarea>
    </div>
    <div>
      <label for="groups">分组数量：</label>
      <input type="number" id="groups" name="groups" value="2" min="2">
    </div>
    <button type="submit">开始抽签</button>
  </form>
  <div id="result"></div>
</body>
</html>

// 获取form表单输入值的函数
function getInputs(form) {
  const members = form.members.value.trim().split(/[,\n]/).map(m => m.trim()).filter(m => m); // 转换成数组格式，并清理空格和空白行
  const groups = +form.groups.value; // 输入分组数量
  return { members, groups };
}
// 主要操作函数
function drawLots(members, groups) {
  const baseNum = Math.ceil(members.length / groups); // 计算每组包含多少成员
   const shuffledMembers = shuffle(members); // 将成员数组随机排序
  let assignedCount = 0; // 计数器，记录已分配的人数
  let result = ''; // 定义一个空字符串，用来存放抽签结果
  let groupsRes = []; // 定义一个空数组，用来存放每个分组的成员
  // 遍历随机排序后的成员列表，进行分组
  shuffledMembers.forEach(member => {
    if (member.assigned) return; // 如果该成员已被分配，则跳过
    for (let i = 0; i < groups; i++) {
      const group = groupsRes[i] || []; // 如果当前分组未定义，则将其初始值设为空数组
      if (group.length < baseNum && !group.includes(member)) { // 如果该分组未满员，并且该成员没有被分配到其他组内
        group.push(member); // 将该成员加入当前分组
        member.assigned = true; // 给该成员打上已分组标记
        assignedCount++; // 记录已分配人数
        groupsRes[i] = group; // 将该分组重新赋值给原数组
        break; // 遍历下一个成员
      }
    }
  });
  // 输出结果
  groupsRes.forEach((group, index) => {
    result += `<h3>第${index+1}组：</h3><ul>`;
    group.forEach(member => result += `<li>${member}</li>`);
    result += `</ul>`;
  });
  document.getElementById('result').innerHTML = result; // 修改DOM节点内容，将抽签结果展示给用户
}
// 监听表单提交事件
function handleSubmit(event) {
  event.preventDefault();
  const form = event.currentTarget;
  const { members, groups } = getInputs(form);
  if (members.length === 0) {
    alert('请输入团队成员！');
    return;
  }
  drawLots(members, groups);
}
document.getElementById('form').addEventListener('submit', handleSubmit); // 挂载监听函数