html 抽签分小组代码
时间: 2023-11-14 17:59:37 浏览: 183
20数字抽签html代码
以下是一个简单的HTML和JavaScript代码,可以实现抽签分小组功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>抽签分组</title>
</head>
<body>
<h1>抽签分组</h1>
<p>请输入学生名单,每个名字用逗号隔开:</p>
<textarea id="student-list"></textarea>
<p>请输入每组的人数:</p>
<input type="number" id="group-size" min="1" value="3">
<button onclick="drawLots()">抽签分组</button>
<h2>分组结果</h2>
<div id="group-result"></div>
<script>
function drawLots() {
var studentList = document.getElementById("student-list").value.split(",");
var groupSize = parseInt(document.getElementById("group-size").value);
var numGroups = Math.ceil(studentList.length / groupSize);
var groups = new Array(numGroups);
for (var i = 0; i < numGroups; i++) {
groups[i] = new Array();
}
for (var i = 0; i < studentList.length; i++) {
var groupIndex = i % numGroups;
groups[groupIndex].push(studentList[i]);
}
var resultHtml = "";
for (var i = 0; i < numGroups; i++) {
resultHtml += "<h3>第 " + (i + 1) + " 组:</h3>";
resultHtml += "<ul>";
for (var j = 0; j < groups[i].length; j++) {
resultHtml += "<li>" + groups[i][j] + "</li>";
}
resultHtml += "</ul>";
}
document.getElementById("group-result").innerHTML = resultHtml;
}
</script>
</body>
</html>
```
这个代码包含一个文本框,让用户输入学生名单,一个数字输入框,让用户输入每组的人数,以及一个按钮,当用户点击按钮时,会调用 `drawLots()` 函数进行抽签分组。该函数按照以下步骤进行操作:
1. 获取用户输入的学生名单和每组的人数。
2. 计算需要分成多少组,并创建一个二维数组 `groups` 来存储每组的学生名单。
3. 遍历学生名单,将每个学生随机分配到一个组中。
4. 根据 `groups` 数组生成 HTML 输出结果。
在结果中,每个小组的学生名单会以无序列表的形式展示出来。
阅读全文