Javascript 一个重复的倒计时计时器，即使在浏览器刷新后也会继续

首先，我对javascript非常陌生。我有一个Shopify商店，我计划在我的每一个产品页面上设置一个倒数计时器，就像亚马逊一样。我知道有很多插件我可以用于Shopify，但没有一个与我的Shopify商店的主题和风格相匹配，所以我计划自己制作一个

我想要的是，如果User-1打开我的网站并导航到一个产品页面，他应该会看到一个计时器倒计时到一个特定的时间，比如说

12:00:00

（hh:mm:ss）。假设用户1看到“

交易在11:20:10结束”

，现在如果用户2同时打开同一个产品页面，那么他也应该看到“

交易在11:20:10结束”

，关键是每次浏览器加载/重新加载页面时计时器不应该刷新回

12:00:00

，网站上的每个用户都应该看到倒计时计时器上剩余的相同时间

我先做了一些研究，然后在我的商店里运行了一个计时器。这不是我想要的，但代码如下：

    var interval;
    var minutes = 1;
    var seconds = 5;
    window.onload = function() {
        countdown('countdown');
    }

    function countdown(element) {
        interval = setInterval(function() {
            var el = document.getElementById(element);
            if(seconds == 0) {
                if(minutes == 0) {
                    el.innerHTML = "countdown's over!";                    
                    clearInterval(interval);
                    return;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ? 'seconds' : 'second';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
            seconds--;
        }, 1000);
    }
    </script>

var区间；
var分钟=1；
var秒=5；
window.onload=函数（）{
倒计时（“倒计时”）；
}
函数倒计时（元素）{
间隔=设置间隔（函数（）{
var el=document.getElementById（元素）；
如果（秒==0）{
如果（分钟==0）{
el.innerHTML=“倒数计时结束！”；
间隔时间；
返回；
}否则{
分钟--；
秒=60；
}
}
如果（分钟>0）{
var minute_text=minutes+（minutes>1？'minutes'：'minute'）；
}否则{
var minute_text=''；
}
var second_text=seconds>1？'seconds'：'second'；
el.innerHTML=分钟文本+''+秒+''+秒文本+''剩余文本'；
秒--；
}, 1000);
}

下面是它的样子：

它确实可以工作，但存在以下问题：

它会随着浏览器刷新而刷新

它没有时间

当计时器达到零时，它不会自动重复

对于每个用户，剩余时间各不相同

---

正如我所提到的，我几乎是JavaScript中的noob。有人能帮我建立一个倒计时计时器来克服上述问题吗？

我不确定Shopify是如何处理插件的，但必须有一些方法来编辑它们的CSS，这样你才能让它们与你的主题风格相匹配

您在这里所做的，在您提供的JS中，将始终具有这种行为，因为它是客户端代码。脚本将在每次刷新后运行，并始终将值

minutes

和

seconds

刷新为相关的初始值，即

1

和

5

。我相信这回答了你的第一个问题

根据您的第二个问题，您显然没有在JS脚本中编码

hours

。所以

hours

不应该出现，如果他们出现，那将是一个谜

关于第三个问题，在

onload

函数期间，您只调用

countdown

一次

根据第一个答案，很自然，时钟不应该在用户之间同步，因为他们在不同的时间逻辑上刷新您的页面

---

因此，我认为您最好使用其中一个插件并修改CSS。

我不确定Shopify如何处理插件，但必须有一些方法来编辑插件的CSS，以便让它们与主题的样式相匹配

您在这里所做的，在您提供的JS中，将始终具有这种行为，因为它是客户端代码。脚本将在每次刷新后运行，并始终将值

minutes

和

seconds

刷新为相关的初始值，即

1

和

5

。我相信这回答了你的第一个问题

根据您的第二个问题，您显然没有在JS脚本中编码

hours

。所以

hours

不应该出现，如果他们出现，那将是一个谜

关于第三个问题，在

onload

函数期间，您只调用

countdown

一次

根据第一个答案，很自然，时钟不应该在用户之间同步，因为他们在不同的时间逻辑上刷新您的页面

因此，我认为您最好使用其中一个插件，只需修改CSS即可。

解释 问题1：它会随着浏览器刷新而刷新。 原因：因为您硬编码了秒数和分钟数（

var seconds=5

，

var minutes=1

），所以访问页面的每个用户都会看到计时器从完全相同的值“剩余1分5秒”一次又一次倒数计时

解决方案：不硬编码倒计时的开始值，而是硬编码截止日期。因此，不要对页面的每个访问者说“从1分5秒开始倒数到0！”，而要说“从现在的任何时间倒数到午夜！”。这样，倒计时将始终在网站的不同用户之间同步（假设他们的计算机时钟设置正确）

问题2：它没有小时。 原因：您的代码只有用于跟踪秒和分钟的变量，没有用于跟踪小时的代码

解决方案：与问题1的解决方案类似：不跟踪剩余的小时/分钟/秒，只跟踪截止日期，然后根据当前客户端时间计算剩余的小时/分钟/秒

问题3：当计时器达到零时，它不会自动重复。 原因：嵌套的

如果<