我使用以下代码创建了这个计时器，它在本地可以正常工作，但在集成到论坛时遇到了问题。有人能帮忙吗？
<!-- HTML (添加到 Header 部分) -->
<style>
button {
padding: 5px;
margin: 2px;
cursor: pointer;
border: none;
color: white;
width: 100px; /* 设置所有按钮所需的宽度 */
border-radius: 5px;
}
#readTaskButton {
background: #008000; /* 深绿色，在深色背景上更清晰 */
}
#enterRoomButton {
background: #DAA520; /* 深黄色 */
}
#pauseButton {
background: #A0522D; /* 深橙色 */
}
#stopButton {
background: #FF0000; /* 深红色 */
}
</style>
<div style="display: flex; align-items: center; justify-content: center;">
<div style="display: flex; flex-direction: column; align-items: center; margin-right: 20px;">
<button id="readTaskButton" onclick="startTimer(90)">阅读任务</button>
<button id="enterRoomButton" onclick="startTimer(480)">进入房间</button>
</div>
<div id="timer" style="font-size: 2em; text-align: center; margin: 0 20px;" onclick="togglePauseResume()">00:00</div>
<div style="display: flex; flex-direction: column; align-items: center; margin-left: 20px;">
<button id="pauseButton" onclick="togglePauseResume()">暂停</button>
<button id="stopButton" onclick="stopTimer()">停止</button>
</div>
</div>
<!-- JavaScript (添加到 Footer 部分) -->
<script>
let timer;
let totalSeconds;
let isShortTimer = true;
let isPaused = false;
function startTimer(duration) {
resetTimer();
totalSeconds = duration;
timer = setInterval(updateTimer, 1000);
}
function togglePauseResume() {
if (isPaused) {
resumeTimer();
} else {
pauseTimer();
}
updateButtonLabel();
}
function updateButtonLabel() {
const button = document.getElementById('pauseButton');
button.innerText = isPaused ? '恢复' : '暂停';
}
function pauseTimer() {
clearInterval(timer);
isPaused = true;
}
function resumeTimer() {
isPaused = false;
timer = setInterval(updateTimer, 1000);
}
function stopTimer() {
resetTimer();
updateButtonLabel();
}
function updateTimer() {
if (totalSeconds <= 0) {
if (isShortTimer) {
isShortTimer = false;
startTimer(480); // 初始计时器结束后自动开始较长计时器
} else {
isShortTimer = true;
startTimer(90); // 较长计时器结束后自动开始初始计时器
}
}
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
const formattedTime = `${formatTime(minutes)}:${formatTime(seconds)}`;
document.getElementById('timer').innerText = formattedTime;
totalSeconds--;
}
function formatTime(time) {
return time < 10 ? '0' + time : time;
}
function resetTimer() {
clearInterval(timer);
document.getElementById('timer').innerText = '00:00';
}
</script>
