先上源代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>智能监考抽签系统 V2.3</title>
<style>
body {
font-family: "微软雅黑", Arial, sans-serif;
margin: 20px;
background: #f0f3f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 30px;
}
.input-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 30px;
}
.file-upload {
border: 2px dashed #3498db;
padding: 20px;
border-radius: 8px;
text-align: center;
}
button {
background: #3498db;
color: white;
padding: 14px 24px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background 0.3s;
}
button:hover {
background: #2980b9;
}
#resultTable {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
#resultTable th, #resultTable td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}
#resultTable th {
background: #3498db;
color: white;
}
#resultTable tr:nth-child(even) {
background: #f8f9fa;
}
.highlight {
font-weight: bold;
color: #E41F0B;
}
.warning {
color: #e67e22;
margin: 10px 0;
padding: 10px;
background: #fdf2e9;
border-radius: 5px;
}
.status-bar {
text-align: right;
padding: 10px;
color: #7f8c8d;
}
</style>
</head>
<body>
<div class="container">
<h1 id="titleHeader">【请填写活动标题】</h1>
<div class="input-section">
<div>
<input type="text" id="eventTitle" placeholder="输入活动标题" style="width:100%;padding:8px;margin-bottom:20px;">
<div class="file-upload">
<h3>考场信息文件</h3>
<input type="file" id="examRoomFile" accept=".txt">
<p class="warning">格式要求：每行格式：考场编号,考场地址,主监考人数,副监考人数<br>示例：101,逸夫楼201教室,1,2</p>
</div>
</div>
<div class="file-upload">
<h3>监考名单文件</h3>
<input type="file" id="teacherFile" accept=".txt">
<p class="warning">格式示例：<br>
--主监考名单--<br>
张三<br>
李四<br>
--副监考名单--<br>
王五<br>
赵六</p>
</div>
</div>
<div style="text-align: center; margin: 20px 0;">
<button>开始抽签</button>
</div>
<div class="status-bar" id="statusInfo"></div>
<div id="resultArea" style="display: none;">
<h3>抽签结果</h3>
<table id="resultTable">
<thead>
<tr>
<th>序号</th>
<th>考场编号</th>
<th>考场地址</th>
<th>主监考</th>
<th>副监考</th>
</tr>
</thead>
<tbody id="resultBody"></tbody>
</table>
</div>
</div>
<script>
let examRooms = [];
let originalMainTeachers = [];
let originalSubTeachers = [];
let currentResult = [];
function parseExamRoomFile(content) {
return content.split('\n').filter(line => line.trim()).map(line => {
const parts = line.split(',');
if (parts.length !== 4) {
alert("考场信息格式错误，请检查文件格式");
return null;
}
return {
code: parts[0].trim(),
address: parts[1].trim(),
mainNum: parseInt(parts[2]),
subNum: parseInt(parts[3])
};
}).filter(item => item);
}
function parseTeacherFile(content) {
const mainTag = '--主监考名单--';
const subTag = '--副监考名单--';
const mainStart = content.indexOf(mainTag);
const subStart = content.indexOf(subTag);
if (mainStart === -1 || subStart === -1) {
alert(`请严格使用分隔符：\n${mainTag}\n${subTag}`);
return { main: [], sub: [] };
}
// 精确计算分隔符长度
const mainLen = mainTag.length;
const subLen = subTag.length;
// 获取主监考名单（排除分隔符）
const mainEnd = mainStart + mainLen;
const mainSection = content.slice(mainEnd, subStart);
// 获取副监考名单（排除分隔符）
const subEnd = subStart + subLen;
const subSection = content.slice(subEnd);
return {
main: mainSection.split('\n')
.map(n => n.trim())
.filter(n => n && !n.includes('--')),
sub: subSection.split('\n')
.map(n => n.trim())
.filter(n => n && !n.includes('--'))
};
}
function startLottery() {
// 状态重置
document.getElementById('statusInfo').textContent = '';
// 验证数据完整性
if(examRooms.length === 0){
alert("请先上传考场信息文件");
return;
}
if(originalMainTeachers.length === 0 || originalSubTeachers.length === 0){
alert("请先上传监考名单文件");
return;
}
// 更新标题
const title = document.getElementById('eventTitle').value;
document.getElementById('titleHeader').textContent = title || "【未命名监考活动】";
// 初始化抽签池
let mainPool = [...originalMainTeachers];
let subPool = [...originalSubTeachers];
currentResult = [];
examRooms.forEach((room, index) => {
const mainSelected = [];
const subSelected = [];
// 主监考抽签
for(let i=0; i<room.mainNum; i++){
if(mainPool.length === 0) break;
const randomIndex = Math.floor(Math.random() * mainPool.length);
mainSelected.push(mainPool.splice(randomIndex, 1)[0]);
}
// 副监考抽签
for(let i=0; i<room.subNum; i++){
if(subPool.length === 0) break;
const randomIndex = Math.floor(Math.random() * subPool.length);
subSelected.push(subPool.splice(randomIndex, 1)[0]);
}
currentResult.push({
seq: index + 1,
code: room.code,
address: room.address,
main: mainSelected.join(', ') || '⚠️名单不足',
sub: subSelected.join(', ') || '⚠️名单不足'
});
});
// 显示统计信息
const usedMain = originalMainTeachers.length - mainPool.length;
const usedSub = originalSubTeachers.length - subPool.length;
document.getElementById('statusInfo').innerHTML = `
已分配：主监考 ${usedMain}/${originalMainTeachers.length}
| 副监考 ${usedSub}/${originalSubTeachers.length}
`;
displayResult();
}
function displayResult() {
const tbody = document.getElementById('resultBody');
tbody.innerHTML = '';
currentResult.forEach(item => {
const row = `<tr>
<td>${item.seq}</td>
<td>${item.code}</td>
<td>${item.address}</td>
<td class="highlight">${item.main}</td>
<td>${item.sub}</td>
</tr>`;
tbody.innerHTML += row;
});
document.getElementById('resultArea').style.display = 'block';
}
// 文件处理事件
document.getElementById('examRoomFile').addEventListener('change', function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function() {
examRooms = parseExamRoomFile(this.result);
document.getElementById('statusInfo').textContent =
`已加载 ${examRooms.length} 个考场信息`;
};
reader.readAsText(file);
});
document.getElementById('teacherFile').addEventListener('change', function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function() {
const teachers = parseTeacherFile(this.result);
originalMainTeachers = teachers.main;
originalSubTeachers = teachers.sub;
document.getElementById('statusInfo').textContent =
`已加载 主监考 ${teachers.main.length} 人，副监考 ${teachers.sub.length} 人`;
};
reader.readAsText(file);
});
</script>
</body>
</html>更多推荐内容
- python批量插入图片到word文档里并且实现分栏排版 7 小时前
- 实时系统监控面板 7 小时前
- 学习必备：B站全自动跳过固定片头片尾 V1.4 （支持指定视频跳过） 8 小时前
文章采用： 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明：本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系客服并出示版权证明以便删除!
python批量插入图片到word文档里并且实现分栏排版
« 上一篇
07-04
实时系统监控面板
下一篇 »
07-04
发表评论