使用服务器时间的 jQuery 计时器/倒计时答案

【问题标题】：jQuery timer/countdown using server time使用服务器时间的 jQuery 计时器/倒计时
【发布时间】：2012-02-14 18:59:16
【问题描述】：

我正在尝试每 10 分钟倒计时一次（根据服务器时间，而不是客户端时间）。每 10 分钟（例如上午 10 点、上午 10 点 10 分、上午 10 点 20 分[十位]）它需要刷新页面并重新开始。

我找到了超时函数，但没有一个使用服务器时间并且我可以在十位上重置。

以前有人做过这样的事吗？

谢谢

【问题讨论】：

您是否考虑过简单地将 JavaScript 中的时间设置为与服务器的时间相匹配？
我想出了一个使用 jQuery 和服务器端值的解决方案。一旦允许，我会发布答案。

标签： c# jquery timer

【解决方案1】：

你可以在服务器端渲染定时器的开始，然后用它来控制服务器端的定时器逻辑。

例如

var timerStart = new Date("dateString");//Render this from server side

然后在倒计时逻辑中使用timerStart变量。

在 JavaScript 中创建新日期的一些示例。

new Date(milliseconds) //milliseconds since 1970/01/01
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

【讨论】：

【解决方案2】：

我对 C# 不是很熟悉，所以请原谅 PHP 示例，但概念是相同的。在您的 Javascript 中，创建一个变量来保存下一次刷新前的时间长度。

<script>
    var firstRefresh=<?php echo $numberOfMiliSecondsToFirstRefresh; ?>;
</script>

然后您可以将您的第一个计时器设置为在该时间段内刷新，从那时起，您可以每 10 分钟刷新一次...

【讨论】：

【解决方案3】：

我最终使用了 cmets/answers 和其他帖子中的一些想法并提出了这个想法。

它每 10 分钟倒计时一次（同样，根据服务器）并显示计时器值。当它达到“0”（-1:59）时，它将重新加载页面并在 10 分钟后重新开始。

可能不是最干净的代码，但它似乎工作得很好：

<script>
var currentMin = @DateTime.Now.Minute;
var currentSec = @DateTime.Now.Second;
var minutesLeft = 0;
var secondsLeft = 0;

$(document).ready(function() {
    setupTimer();
});

function setupTimer() {
    var baseMins = 0;
    if (currentMin >= 0 && currentMin <= 9)
        baseMins = 10;
    else if (currentMin >= 10 && currentMin <= 19)
        baseMins = 20;
    else if (currentMin >= 20 && currentMin <= 29)
        baseMins = 30;
    else if (currentMin >= 30 && currentMin <= 39)
        baseMins = 40;
    else if (currentMin >= 40 && currentMin <= 49)
        baseMins = 50;
    else if (currentMin >= 50 && currentMin <= 59)
        baseMins = 60;

    minutesLeft = (baseMins - 1) - currentMin;
    secondsLeft = 60 - currentSec;

    setInterval(decreaseTimer, 1000);
}

function decreaseTimer() {
    secondsLeft--;
    if (secondsLeft == -1) {
        minutesLeft--;
        secondsLeft = 59;
    }
    if (minutesLeft == -1 && secondsLeft == 59) {
        location.reload();
    }
    displayTimer();
}

function displayTimer() {
    if (minutesLeft == 0)
        minutesLeft = "0";
    if (secondsLeft < 10)
        secondsLeft = "0" + secondsLeft;
    var timerDisplay = minutesLeft + ":" + secondsLeft;
    $("#timer").text(timerDisplay);
}
</script>

【讨论】：