Javascript 当选项卡不是焦点时保持脚本运行。（JS）_Javascript_Jquery_Focus

Javascript 当选项卡不是焦点时保持脚本运行。（JS）

javascript jquery

Javascript 当选项卡不是焦点时保持脚本运行。（JS）,javascript,jquery,focus,Javascript,Jquery,Focus,因此，我为我的工作构建了一个小应用程序，这样他们就可以在后台运行一个计时器，每10分钟响一次（当分钟栏中的最后一个数字是“0”）并且它完全按照我的预期工作。然而，当标签在大约5分钟后不再是焦点时，它不会发出叮当声。如果我在叮当声响起前几分钟切换标签，我就能听到声音，但如果我在叮当声响起前9分钟切换标签，它就会保持沉默。我不知道如何在后台保持它的活力。我不想构建一个windows应用程序，因为老板为了方便起见要求它成为一个网页。以下是我正在使用的代码（时钟本身不是我的作品）：钟 /*自定义字体

因此，我为我的工作构建了一个小应用程序，这样他们就可以在后台运行一个计时器，每10分钟响一次（当分钟栏中的最后一个数字是“0”）并且它完全按照我的预期工作。然而，当标签在大约5分钟后不再是焦点时，它不会发出叮当声。如果我在叮当声响起前几分钟切换标签，我就能听到声音，但如果我在叮当声响起前9分钟切换标签，它就会保持沉默。我不知道如何在后台保持它的活力。我不想构建一个windows应用程序，因为老板为了方便起见要求它成为一个网页。以下是我正在使用的代码（时钟本身不是我的作品）：


钟
/*自定义字体和颜色*/
html{
背景图像：线性渐变（右下角，#0e284e，#6495db）；
字体系列：“Roboto”，无衬线；
字体大小：粗体；
颜色：#FFFFFF；
}
12:34
“严格使用”；
新嚎叫({
src:['Ding.ogg'，'Ding.mp3']，
循环：false
});
var targetWidth=0.9；//全屏幕宽度的比例
var curFontSize=20；//不要改变
var hasDinged=false；//检查一下电话铃现在是否响了
函数updatelock（）{
var d=新日期（）；
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？“下午”：“上午”；
$（“#时钟文本”）。文本；
setTimeout（updateLock，1000-d.getTime（）%1000+20）；
var endsInZero=d.getMinutes（）%10；
如果（endsInZero==0）{
如果（hasDinged==false）{
声音。播放（）；
hasDinged=true；
}
}
其他的
{
hasDinged=假；
}
}
updatelock（）；

任何帮助都将不胜感激

干杯

-Scobbo

Chrome将限制未聚焦选项卡的JS。在整个10分钟内，您应该在开始时使用一个setInterval，然后只使用视觉时钟的小超时。您可能需要使用

Date.now（）

保持时钟视觉同步。Chrome将限制不在焦点上的选项卡的JS。在整个10分钟内，您应该在开始时使用一个setInterval，然后只使用视觉时钟的小超时。您可能需要使用

Date.now（）

Hmm保持时钟视觉同步，这很烦人。我来试试看。谢谢你！嗯，真烦人。我来试试看。谢谢你！

<!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>