所以我为我的工作构建了一个小应用程序，这样他们就可以在后台运行一个计时器，每 10 分钟响一次(当分钟列的最后一位数字是"0"时(，它完全按照我的预期工作。但是，当选项卡在大约 5 分钟后不是焦点时，它不会叮叮当当。如果我在它叮叮当当前几分钟切换选项卡，我可以听到声音，但如果我在 9 分钟之前切换，它会保持沉默。我不知道如何在后台保持活力。我不想构建一个Windows应用程序，因为老板要求它是一个网页以方便。这是我正在使用的代码(时钟本身不是我的工作(：
<!DOCTYPE html>
<!-- saved from url=(0095)https://www.nayuki.io/res/full-screen-clock-javascript/full-screen-clock-12hr-with-seconds.html -->
<html style="height:100%; margin:0; padding:0" class="gr__nayuki_io">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Clock</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style type="text/css">
/* Customizable font and colors */
html {
background-image: linear-gradient(to bottom right, #0e284e, #6495db);
font-family: 'Roboto', sans-serif;
font-weight: bold;
color: #FFFFFF;
}
</style>
</head>
<body style="display:flex; flex-direction: column; height:100%; margin:0; padding:0; justify-content:center; align-items:center" data-gr-c-s-loaded="true">
<img id="logo" src="logo.png" alt="Emmaus College" style="height:40%;">
<p id="clocktext" style="display: block; font-kerning: none; font-size: 22vw; padding: 0; margin: 0;">12:34</p>
<script src="howler/howler.js"></script>
<script type="text/javascript">
"use strict";
var dingSound = new Howl({
src: ['Ding.ogg', 'Ding.mp3'],
loop: false
});
var targetWidth = 0.9; // Proportion of full screen width
var curFontSize = 20; // Do not change
var hasDinged = false; // Check to see if the ding has rung this minute
function updateClock() {
var d = new Date();
var s = "";
s += ((d.getHours() + 11) % 12 + 1) + ":";
s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes() /*+ ":"*/;
//s += (10 > d.getSeconds() ? "0" : "") + d.getSeconds() + "u00A0";
//s += d.getHours() >= 12 ? "pm" : "am";
$("#clocktext").text(s);
setTimeout(updateClock, 1000 - d.getTime() % 1000 + 20);
var endsInZero = d.getMinutes() % 10;
if (endsInZero == 0) {
if (hasDinged == false) {
dingSound.play();
hasDinged = true;
}
}
else
{
hasDinged = false;
}
}
updateClock();
</script>
</body>
</html>
任何帮助将不胜感激。
干杯
-斯科博
Chrome将限制未聚焦的选项卡的JS。您应该在开始时对整个 10 分钟使用一个 setInterval，然后只对时钟视觉对象使用小超时。您可能需要使用Date.now()保持时钟视觉同步。