html 抽签分小组代码

在本篇文章中，我们将介绍一种用 HTML 编写的抽签分小组代码，帮助您随机将团队分成几个小组，以便更好地协作。

!DOCTYPE html>
    html>
    head>
    title>
    抽签分小组/title>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    /head>
    body>
    h1>
    抽签分小组/h1>
    form onsubmit="return false">
    label for="students">
    输入学生姓名，以逗号分隔/label>
    input type="text" id="students" name="students">
    button onclick="grouping()">
    分组/button>
    /form>
    ul id="groups">
    /ul>
    script>
function grouping() {
    var students = document.getElementById("students").value.split(",");
    var groups = [];
    var groupNum = Math.ceil(students.length / 3);
    for(var i = 0;
     i  groupNum;
 i++) {
    groups[i] = [];
}
    for(var j = 0;
     j  students.length;
 j++) {
    var index = j % groupNum;
    groups[index].push(students[j]);
}
    var list = document.getElementById("groups");
    list.innerHTML = "";
    for(var k = 0;
     k  groups.length;
 k++) {
    var group = groups[k];
    var groupItem = document.createElement("li");
    groupItem.innerText = "小组 " + (k+1) + ": " + group.join(", ");
    list.appendChild(groupItem);
}
}
    /script>
    /body>
    /html>
    

这个代码包括一个表单和一个 JavaScript 函数，点击“分组”按钮，它将把输入表单中的学生名字随机分配到三个小组中，并输出每个小组的成员名单。算法是将学生列表按顺序轮流分配到小组里。

如果要使用这个代码，请在自己的 HTML 文件中复制粘贴代码，根据需要进行修改。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！