我使用以下代码创建了这个计时器，它在本地可以正常工作，但在集成到论坛时遇到了问题。有人能帮忙吗？
<!-- 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>
您好，
您需要将 JS 插入到 Head 中才能使其正常工作！
另外，请注意 button 的 CSS – 您应该创建一个特定的选择器来避免覆盖默认 CSS。
理想情况下，您应该创建一个主题组件，并使用出口点来处理 HTML/逻辑。我稍后可以向您展示！
2 个赞
非常感谢您的回复。
我试过了。我创建了一个新的主题组件，然后使用“编辑 CSS/HTML”选项，将其代码插入到“common>header”部分。我可以在网站上看到计时器，但问题是计时器无法播放。它有播放和停止按钮，在本地运行效果很好，但在网站上它只显示计时器但无法正常工作。
我还检查了控制台，使用“检查”功能，这是它显示的错误。
是的，您的代码被 CSP 阻止了。（请参阅安全设置）
您可以在设置中将 unsafe-inline 列入白名单，但这似乎不是一个好主意。
在您的情况下，要使您的代码在启用 CSP 的情况下正常工作，我认为您需要以不同的方式处理点击。
顺便说一句，这里有一个使用您的代码的主题组件：https://github.com/Arkshine/discourse-timer-component。
您可以随意分叉它并在您的 Discourse 上安装它。
希望我的代码不会太糟糕，但这在这种情况下比添加纯 JavaScript 是更可取的方式。
它应该与额外的响应式功能、设置和区域设置相同。
这可能令人不知所措，但这是深入研究主题组件开发的绝佳机会！如果您不明白什么，请随时提问。 
如果您想在本地使用它，我强烈建议使用Discourse 主题 CLI。它非常方便！
2 个赞
我真的非常感谢你帮我解决这个问题。这太棒了！！
这激励了我去学习这个。
关于计时器，我有一些小的改动和疑问。可以和你分享吗？
我完全没弄懂你的代码；看起来是这样 
如果计时器还没有开始，那么点击这些暂停/停止按钮是没有意义的。显示“暂停”或“继续”也是如此，所以就像在等待时有一个活动的计时器。实际上，我宁愿隐藏该按钮。但我想使用“暂停”标签作为默认值是可以的。
它在这两者之间交替，好的。我以为它是一个带有其中一个计时器的循环。
我不确定是否理解上下文，这对我来说看起来很奇怪，我可以改变它。
我明白了。
在做其他事情之前，让我先修复它。
你好，
看到这个计时器得以实现，我感到非常激动。你真是太棒了，令人鼓舞。
这是一个医生考试用的计时器，我自己也是一名医生，希望能帮助其他医生。
考试包括16个房间，每个房间有16位不同的病人需要我们诊断和处理。在进入任何房间之前，门外会有一个任务，你可以用1分30秒阅读，然后进入房间，你有8分钟的时间完成任务和处理病人，这个过程会重复进行16个房间。总共需要3个小时才能完成。
我这次考试不幸失败了，原因是信息错误和误导，这激励我创建了这个论坛来帮助指导其他医生。
希望这能提供一些背景信息。
1 个赞
我已经推送了一个更新。它应该可以循环短/长计时器，并且您现在可以切换到任何计时器。我还删除了“waiting..”的使用。如果它运行得更好，请告诉我。
感谢您解释了背景，我现在明白了！ 
2 个赞
我发现了一个bug，如果我点击“读取任务”按钮，计时器会从1:30分钟变为8:00分钟，然后一直循环显示1:30分钟。如果我点击“进入房间”按钮，计时器会从8:00变为1:30，然后一直循环显示8:00分钟的计时器。
我的错。已修复。我当时很匆忙，只检查了第一个循环，没有注意到之后开关没有切换。
2 个赞
没关系！
我也会开始学习您之前分享的资料。如果我有任何疑问，会再联系您。
现在的问题是，当你点击“Read Task”按钮时，计时器从 1:30 开始，然后在 8:00 循环。
1:30 > 8:00 > 8:00 > 8:00 …
如果你点击“Enter Room”按钮，计时器将从 8:00 开始，然后在 1:30 循环。
8:00 > 1:30 > 1:30 > 1:30 …
理想情况下，应该有一个平滑、连续的循环，在 1:30 和 8:00 之间交替，起始点由你首先点击的按钮决定。
例如，如果你点击“Read Task”按钮，计时器应从 1:30 开始，然后以 8:00 和 1:30 之间的交替循环进行：
1:30 > 8:00 > 1:30 > 8:00…
如果你点击“Enter Room”按钮，计时器应从 8:00 开始，并遵循 1:30 和 8:00 之间的交替循环：
8:00 > 1:30 > 8:00 > 1:30…
您确定您已更新并刷新了页面吗？您描述的 bug 是在修复之前出现的，我现在无法重现。我再次测试了，它按预期循环。
1 个赞
我想现在我想学习如何自己修改计时器。这样我就不会再打扰你了。
我想给自己布置一个小任务，用这个现有的计时器项目来帮助我学习。
任务是在实际计时器正上方添加一个名称“PLAB 2 Timer”，如下图所示：
你能指导我从哪里开始吗？
第一步是安装 Discourse 以便进行开发。这样测试会更容易。
然后，您可以 fork 我的组件，将其克隆到某个地方，并使用 Discourse Theme CLI。
查看 \u003ctemplate\u003e... \u003c/template\u003e 代码。您可以在此处添加文本。
CSS 位于 common/common.scss 文件中。
您可以通过在 locales/en.yml 中添加条目来本地化您的文本——然后您可以使用 {{I18n.t(themePrefix("my_translation_key"))}}
2 个赞
