feat: 添加试卷和答题卡数量控制功能,优化信息显示样式

This commit is contained in:
MKStoler1024 2025-04-12 17:06:30 +00:00
parent 3ced2cf789
commit 7a2fbf0603
10 changed files with 762 additions and 43 deletions

View File

@ -8,7 +8,25 @@ document.addEventListener("DOMContentLoaded", () => {
const statusElem = document.getElementById("status");
const examTableBodyElem = document.getElementById("exam-table-body");
const roomElem = document.getElementById("room");
const infoToggleBtn = document.getElementById("info-toggle-btn");
const paperInfoElem = document.getElementById("paper-info");
const examPapersElem = document.getElementById("exam-papers");
const answerSheetsElem = document.getElementById("answer-sheets");
let offsetTime = getCookie("offsetTime") || 0;
let showPaperInfo = getCookie("showPaperInfo") === "true";
// 初始化显示状态
if (showPaperInfo) {
currentSubjectElem.style.display = "none";
paperInfoElem.style.display = "block";
}
infoToggleBtn.addEventListener("click", () => {
showPaperInfo = !showPaperInfo;
setCookie("showPaperInfo", showPaperInfo, 365);
currentSubjectElem.style.display = showPaperInfo ? "none" : "block";
paperInfoElem.style.display = showPaperInfo ? "block" : "none";
});
function fetchData() {
// 优先使用本地配置
@ -83,9 +101,40 @@ document.addEventListener("DOMContentLoaded", () => {
}
});
// 清空原有内容
if (paperInfoElem) paperInfoElem.style.display = showPaperInfo ? "block" : "none";
if (currentSubjectElem) currentSubjectElem.style.display = showPaperInfo ? "none" : "block";
if (currentExam) {
if (showPaperInfo) {
// 加载本地保存的页数信息
const paperCount = document.getElementById('paper-count');
const paperPages = document.getElementById('paper-pages');
const sheetCount = document.getElementById('sheet-count');
const sheetPages = document.getElementById('sheet-pages');
if (paperCount && paperPages && sheetCount && sheetPages) {
try {
const savedInfo = localStorage.getItem('paperInfo');
if (savedInfo) {
const info = JSON.parse(savedInfo);
paperCount.value = info.paperCount || 0;
paperPages.value = info.paperPages || 0;
sheetCount.value = info.sheetCount || 0;
sheetPages.value = info.sheetPages || 0;
}
} catch (e) {
console.error('加载页数信息失败:', e);
}
}
} else if (currentSubjectElem) {
currentSubjectElem.textContent = `当前科目: ${currentExam.name}`;
}
if (examTimingElem) {
examTimingElem.textContent = `起止时间: ${formatTimeWithoutSeconds(new Date(currentExam.start).toLocaleTimeString('zh-CN', { hour12: false }))} - ${formatTimeWithoutSeconds(new Date(currentExam.end).toLocaleTimeString('zh-CN', { hour12: false }))}`;
}
const remainingTime = (new Date(currentExam.end).getTime() - now.getTime() + 1000) / 1000;
const remainingHours = Math.floor(remainingTime / 3600);
const remainingMinutes = Math.floor((remainingTime % 3600) / 60);
@ -93,35 +142,46 @@ document.addEventListener("DOMContentLoaded", () => {
const remainingTimeText = `${remainingHours}${remainingMinutes}${remainingSeconds}`;
if (remainingHours === 0 && remainingMinutes <= 14) {
if (remainingTimeElem) {
remainingTimeElem.textContent = `倒计时: ${remainingTimeText}`;
remainingTimeElem.style.color = "red";
remainingTimeElem.style.fontWeight = "bold";
}
if (statusElem) {
statusElem.textContent = "状态: 即将结束";
statusElem.style.color = "red";
}
// 在剩余15分钟时显示提醒
if (isnotificated === false && remainingMinutes === 14 && remainingSeconds === 59) {
isnotificated = true;
const overlay = document.getElementById('reminder-overlay');
if (overlay) {
overlay.classList.add('show');
setTimeout(() => {
overlay.classList.remove('show');
}, 5000);
}
}
} else {
if (remainingTimeElem) {
remainingTimeElem.textContent = `剩余时间: ${remainingTimeText}`;
remainingTimeElem.style.color = "#93b4f7";
remainingTimeElem.style.fontWeight = "normal";
}
if (statusElem) {
statusElem.textContent = "状态: 进行中";
statusElem.style.color = "#5ba838";
}
}
} else if (lastExam && now < new Date(lastExam.end).getTime() + 60000) {
const timeSinceEnd = (now.getTime() - new Date(lastExam.end).getTime()) / 1000;
currentSubjectElem.textContent = `上场科目: ${lastExam.name}`;
examTimingElem.textContent = "";
remainingTimeElem.textContent = ``;
if (currentSubjectElem) currentSubjectElem.textContent = `上场科目: ${lastExam.name}`;
if (examTimingElem) examTimingElem.textContent = "";
if (remainingTimeElem) remainingTimeElem.textContent = "";
if (statusElem) {
statusElem.textContent = "状态: 已结束";
statusElem.style.color = "red";
}
} else if (nextExam) {
const timeUntilStart = ((new Date(nextExam.start).getTime() - now.getTime()) / 1000) + 1;
const remainingHours = Math.floor(timeUntilStart / 3600);
@ -146,12 +206,14 @@ document.addEventListener("DOMContentLoaded", () => {
examTimingElem.textContent = `起止时间: ${formatTimeWithoutSeconds(new Date(nextExam.start).toLocaleTimeString('zh-CN', { hour12: false }))} - ${formatTimeWithoutSeconds(new Date(nextExam.end).toLocaleTimeString('zh-CN', { hour12: false }))}`;
} else {
currentSubjectElem.textContent = "考试均已结束";
examTimingElem.textContent = "";
remainingTimeElem.textContent = "";
if (currentSubjectElem) currentSubjectElem.textContent = "考试均已结束";
if (examTimingElem) examTimingElem.textContent = "";
if (remainingTimeElem) remainingTimeElem.textContent = "";
if (statusElem) {
statusElem.textContent = "状态: 空闲";
statusElem.style.color = "#3946AF";
}
}
examTableBodyElem.innerHTML = "";
@ -219,9 +281,66 @@ document.addEventListener("DOMContentLoaded", () => {
});
});
} catch (e) {
console.error('更新考试信息失败:', e);
errorSystem.show('更新考试信息失败: ' + e.message);
}
}
// 添加页数控制处理
document.querySelectorAll('.count-btn').forEach(btn => {
btn.addEventListener('click', () => {
const target = document.getElementById(btn.dataset.target);
const action = btn.dataset.action;
const currentValue = parseInt(target.value) || 0;
if (action === 'increase') {
target.value = currentValue + 1;
} else if (action === 'decrease' && currentValue > 0) {
target.value = currentValue - 1;
}
// 保存到localStorage
updatePaperInfo();
});
});
// 监听输入框直接输入
['paper-count', 'paper-pages', 'sheet-count', 'sheet-pages'].forEach(id => {
const input = document.getElementById(id);
input.addEventListener('change', () => {
const value = parseInt(input.value) || 0;
input.value = Math.max(0, value); // 确保不小于0
updatePaperInfo();
});
});
function updatePaperInfo() {
const paperInfo = {
paperCount: parseInt(document.getElementById('paper-count').value) || 0,
paperPages: parseInt(document.getElementById('paper-pages').value) || 0,
sheetCount: parseInt(document.getElementById('sheet-count').value) || 0,
sheetPages: parseInt(document.getElementById('sheet-pages').value) || 0
};
localStorage.setItem('paperInfo', JSON.stringify(paperInfo));
}
// 初始化加载保存的页数信息
function loadPaperInfo() {
try {
const savedInfo = localStorage.getItem('paperInfo');
if (savedInfo) {
const info = JSON.parse(savedInfo);
document.getElementById('paper-count').value = info.paperCount || 0;
document.getElementById('paper-pages').value = info.paperPages || 0;
document.getElementById('sheet-count').value = info.sheetCount || 0;
document.getElementById('sheet-pages').value = info.sheetPages || 0;
}
} catch (e) {
console.error('加载页数信息失败:', e);
}
}
loadPaperInfo();
fetchData();
});

View File

@ -105,7 +105,7 @@ h1 {
}
#message {
font-size: 1.5rem;
font-size: 1.8rem;
color: #aaaaaa;
margin-bottom: 24px;
}
@ -164,7 +164,7 @@ table {
th, td {
padding: 3px;
font-size: 1.5rem;
font-size: 1.8rem;
text-align: center;
border-bottom: 1px solid #555555;
}
@ -266,7 +266,7 @@ tr:hover {
#settings-modal-content input[type="number"],
#settings-modal-content input[type="text"] {
font-size: 1.5rem;
font-size: 1.8rem;
padding: 12px 16px;
margin: 8px 0 24px;
width: 100%;
@ -560,3 +560,86 @@ input:checked + .slider:before {
transform: translateY(0);
}
}
.info-section {
position: relative;
}
.info-toggle-btn {
position: absolute;
right: 0;
top: 0;
background-color: #404040;
color: #E6E1E5;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 2;
}
.info-toggle-btn:hover {
background-color: #4A4A4A;
transform: translateY(-1px);
}
.info-toggle-btn .material-icons {
font-size: 24px;
}
.paper-count-container {
margin: 20px 0;
}
.paper-input-group {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
font-size: 2.5rem;
}
.count-control {
display: flex;
align-items: center;
gap: 5px;
}
.count-control input {
width: 60px;
padding: 5px;
font-size: 2rem;
text-align: center;
background-color: #212121;
color: #E6E1E5;
border: 2px solid #404040;
border-radius: 8px;
}
.count-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background-color: #404040;
color: #E6E1E5;
cursor: pointer;
transition: all 0.2s ease;
}
.count-btn:hover {
background-color: #4A4A4A;
transform: translateY(-1px);
}
.count-btn .material-icons {
font-size: 20px;
}

View File

@ -105,7 +105,7 @@ h1 {
}
#message {
font-size: 1.5rem;
font-size: 1.8rem;
color: #6750A4;
margin-bottom: 24px;
}
@ -266,7 +266,7 @@ tr:hover {
#settings-modal-content input[type="number"],
#settings-modal-content input[type="text"] {
font-size: 1.5rem;
font-size: 1.8rem;
padding: 12px 16px;
margin: 8px 0 24px;
width: 100%;
@ -559,3 +559,86 @@ input:checked + .slider:before {
transform: translateY(0);
}
}
.info-section {
position: relative;
}
.info-toggle-btn {
position: absolute;
right: 0;
top: 0;
background-color: #E8DEF8;
color: #1C1B1F;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 2;
}
.info-toggle-btn:hover {
background-color: #D0BCFF;
transform: translateY(-1px);
}
.info-toggle-btn .material-icons {
font-size: 24px;
}
.paper-count-container {
margin: 20px 0;
}
.paper-input-group {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
font-size: 2.5rem;
}
.count-control {
display: flex;
align-items: center;
gap: 5px;
}
.count-control input {
width: 60px;
padding: 5px;
font-size: 2rem;
text-align: center;
background-color: #FFFFFF;
color: #1C1B1F;
border: 2px solid #E8DEF8;
border-radius: 8px;
}
.count-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background-color: #E8DEF8;
color: #1C1B1F;
cursor: pointer;
transition: all 0.2s ease;
}
.count-btn:hover {
background-color: #D0BCFF;
transform: translateY(-1px);
}
.count-btn .material-icons {
font-size: 20px;
}

View File

@ -106,7 +106,7 @@ h1 {
}
#message {
font-size: 1.5rem;
font-size: 1.8rem;
color: #D0BCFF;
margin-bottom: 24px;
}
@ -267,7 +267,7 @@ tr:hover {
#settings-modal-content input[type="number"],
#settings-modal-content input[type="text"] {
font-size: 1.5rem;
font-size: 1.8rem;
padding: 12px 16px;
margin: 8px 0 24px;
width: 100%;
@ -560,3 +560,124 @@ input:checked + .slider:before {
transform: translateY(0);
}
}
.info-toggle-btn {
position: absolute;
right: 20px;
top: 20px;
background-color: #4A4458;
color: #E6E1E5;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 1;
}
.info-toggle-btn:hover {
background-color: #635B70;
transform: translateY(-1px);
}
.info-toggle-btn .material-icons {
font-size: 24px;
}
#paper-info {
font-size: 3rem;
margin: 16px 0;
text-align: left;
color: #E6E1E5;
}
#exam-papers, #answer-sheets {
margin: 10px 0;
}
.paper-count-container {
margin: 20px 0;
}
.paper-input-group {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
font-size: 2.5rem;
}
.count-control {
display: flex;
align-items: center;
gap: 5px;
}
.count-control input {
width: 60px;
padding: 5px;
font-size: 2rem;
text-align: center;
background-color: #332D41;
color: #E6E1E5;
border: 2px solid #4A4458;
border-radius: 8px;
}
.count-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background-color: #4A4458;
color: #E6E1E5;
cursor: pointer;
transition: all 0.2s ease;
}
.count-btn:hover {
background-color: #635B70;
transform: translateY(-1px);
}
.count-btn .material-icons {
font-size: 20px;
}
.info-section {
position: relative;
}
.info-toggle-btn {
position: absolute;
right: 0;
top: 0;
background-color: #4A4458;
color: #E6E1E5;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 2;
}
.info-toggle-btn:hover {
background-color: #635B70;
transform: translateY(-1px);
}
.info-toggle-btn .material-icons {
font-size: 24px;
}

View File

@ -106,7 +106,7 @@ h1 {
}
#message {
font-size: 1.5rem;
font-size: 1.8rem;
color: #6750A4;
margin-bottom: 24px;
}
@ -138,6 +138,10 @@ h1 {
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.info-section {
position: relative;
}
#current-time {
font-size: 8rem;
text-align: center;
@ -153,6 +157,17 @@ h1 {
color: #1C1B1F;
}
#paper-info {
font-size: 3rem;
margin: 16px 0;
text-align: left;
color: #1C1B1F;
}
#exam-papers, #answer-sheets {
margin: 10px 0;
}
table {
width: 100%;
border-collapse: separate;
@ -267,7 +282,7 @@ tr:hover {
#settings-modal-content input[type="number"],
#settings-modal-content input[type="text"] {
font-size: 1.5rem;
font-size: 1.8rem;
padding: 12px 16px;
margin: 8px 0 24px;
width: 100%;
@ -528,6 +543,85 @@ input:checked + .slider:before {
color: #FF9500;
}
.info-toggle-btn {
position: absolute;
right: 0;
top: 0;
background-color: #E8DEF8;
color: #1C1B1F;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 2;
}
.info-toggle-btn:hover {
background-color: #D0BCFF;
transform: translateY(-1px);
}
.info-toggle-btn .material-icons {
font-size: 24px;
}
.paper-count-container {
margin: 20px 0;
}
.paper-input-group {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
font-size: 2.5rem;
}
.count-control {
display: flex;
align-items: center;
gap: 5px;
}
.count-control input {
width: 60px;
padding: 5px;
font-size: 2rem;
text-align: center;
background-color: #FFFFFF;
color: #1C1B1F;
border: 2px solid #E8DEF8;
border-radius: 8px;
}
.count-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background-color: #E8DEF8;
color: #1C1B1F;
cursor: pointer;
transition: all 0.2s ease;
}
.count-btn:hover {
background-color: #D0BCFF;
transform: translateY(-1px);
}
.count-btn .material-icons {
font-size: 20px;
}
@keyframes fadeIn {
from {
opacity: 0;

View File

@ -96,7 +96,7 @@ h1 {
}
#message {
font-size: 1.5rem;
font-size: 1.8rem;
color: #16a3d1;
margin-bottom: 20px;
}
@ -303,7 +303,7 @@ td:last-child {
#settings-modal-content input[type="text"] {
flex-grow: 1;
margin-left: 10px;
font-size: 1.5rem;
font-size: 1.8rem;
padding: 10px;
margin-top: 10px;
margin-bottom: 20px;
@ -585,3 +585,86 @@ input:checked + .slider:before {
transform: translateY(0);
}
}
.info-section {
position: relative;
}
.info-toggle-btn {
position: absolute;
right: 0;
top: 0;
background-color: #1f1f1f;
color: #e0e0e0;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 2;
}
.info-toggle-btn:hover {
background-color: #333;
transform: translateY(-1px);
}
.info-toggle-btn .material-icons {
font-size: 24px;
}
.paper-count-container {
margin: 20px 0;
}
.paper-input-group {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
font-size: 2.5rem;
}
.count-control {
display: flex;
align-items: center;
gap: 5px;
}
.count-control input {
width: 60px;
padding: 5px;
font-size: 2rem;
text-align: center;
background-color: #1f1f1f;
color: #e0e0e0;
border: 2px solid #333;
border-radius: 8px;
}
.count-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background-color: #1f1f1f;
color: #e0e0e0;
cursor: pointer;
transition: all 0.2s ease;
}
.count-btn:hover {
background-color: #333;
transform: translateY(-1px);
}
.count-btn .material-icons {
font-size: 20px;
}

View File

@ -95,7 +95,7 @@ h1 {
}
#message {
font-size: 1.5rem; /* 字体大小 */
font-size: 1.8rem; /* 字体大小 */
color: #16a3d1; /* 文字颜色 */
margin-bottom: 20px; /* 下边距 */
}
@ -311,7 +311,7 @@ td:last-child {
#settings-modal-content input[type="number"],
#settings-modal-content input[type="text"] {
font-size: 1.5rem;
font-size: 1.8rem;
padding: 10px;
margin-top: 10px;
margin-bottom: 20px;
@ -593,3 +593,86 @@ theme-toggle-container {
transform: translateY(0);
}
}
.info-section {
position: relative;
}
.info-toggle-btn {
position: absolute;
right: 0;
top: 0;
background-color: #f0f0f0;
color: #333;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 2;
}
.info-toggle-btn:hover {
background-color: #ccc;
transform: translateY(-1px);
}
.info-toggle-btn .material-icons {
font-size: 24px;
}
.paper-count-container {
margin: 20px 0;
}
.paper-input-group {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
font-size: 2.5rem;
}
.count-control {
display: flex;
align-items: center;
gap: 5px;
}
.count-control input {
width: 60px;
padding: 5px;
font-size: 2rem;
text-align: center;
background-color: #fff;
color: #333;
border: 2px solid #ccc;
border-radius: 8px;
}
.count-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background-color: #f0f0f0;
color: #333;
cursor: pointer;
transition: all 0.2s ease;
}
.count-btn:hover {
background-color: #ccc;
transform: translateY(-1px);
}
.count-btn .material-icons {
font-size: 20px;
}

View File

@ -20,8 +20,8 @@
},
{
"name": "历史",
"start": "2025-03-10T23:55:00",
"end": "2025-04-12T01:32:00"
"start": "2025-04-12T23:55:00",
"end": "2025-04-13T01:32:00"
},
{
"name": "数学",

View File

@ -27,7 +27,60 @@
<div id="current-time"></div>
</div>
<div class="info-section">
<button id="info-toggle-btn" class="info-toggle-btn" title="切换显示模式">
<span class="material-icons">swap_horiz</span>
</button>
<div id="current-subject"></div>
<div id="paper-info" style="display: none;">
<div class="paper-count-container">
<div class="paper-input-group">
<label>试卷:</label>
<div class="count-control">
<button class="count-btn" data-target="paper-count" data-action="decrease">
<span class="material-icons">remove</span>
</button>
<input type="number" id="paper-count" min="0" value="0">
<button class="count-btn" data-target="paper-count" data-action="increase">
<span class="material-icons">add</span>
</button>
</div>
<span></span>
<div class="count-control">
<button class="count-btn" data-target="paper-pages" data-action="decrease">
<span class="material-icons">remove</span>
</button>
<input type="number" id="paper-pages" min="0" value="0">
<button class="count-btn" data-target="paper-pages" data-action="increase">
<span class="material-icons">add</span>
</button>
</div>
<span></span>
</div>
<div class="paper-input-group">
<label>答题卡:</label>
<div class="count-control">
<button class="count-btn" data-target="sheet-count" data-action="decrease">
<span class="material-icons">remove</span>
</button>
<input type="number" id="sheet-count" min="0" value="0">
<button class="count-btn" data-target="sheet-count" data-action="increase">
<span class="material-icons">add</span>
</button>
</div>
<span></span>
<div class="count-control">
<button class="count-btn" data-target="sheet-pages" data-action="decrease">
<span class="material-icons">remove</span>
</button>
<input type="number" id="sheet-pages" min="0" value="0">
<button class="count-btn" data-target="sheet-pages" data-action="increase">
<span class="material-icons">add</span>
</button>
</div>
<span></span>
</div>
</div>
</div>
<div id="exam-timing"></div>
<div id="remaining-time"></div>
<div id="status"></div>

View File

@ -29,7 +29,7 @@ body {
}
.text {
font-size: 1.5rem;
font-size: 1.8rem;
margin-bottom: 32px;
color: #E6E1E5;
}