基于服务器时间的静态倒计时器

Question

客户想要一个启动页面，该页面将显示静态倒计时，当倒计时完成时，用户将被重定向到另一个页面。

启动就像所有用户的一个事件，所以我想让用户在倒计时达到零之前很难访问重定向的页面 - 因此我认为最好基于服务器时间而不是用户/客户端时间，让用户无法修改时间。

倒计时也应该在（两个）不同时区的大约同一时间达到零。

我在网络上找到了一些不同的脚本和方法，但我似乎无法让它工作。

我现在的 jQuery 代码是这样的

var end = new Date(Date.UTC(2020,12-1,10,12,00,00)) ;
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

function serverTime() {
  var time = null;
  $.ajax({url: 'www.myserveradress.com/server_time.php',
      async: false, dataType: 'text',
      success: function(text) {
          time = new Date(text);
      }, error: function(http, message, exc) {
          time = new Date();
  }});
  return time;
}

function showRemaining() {
    var now = serverTime();
    var distance = end - now;
    if (distance < 0) {

        clearInterval(timer);
        window.location.href = '/surprise.html';

        return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('countdown').innerHTML = days + 'dagar ';
    document.getElementById('countdown').innerHTML += hours + 'timmar ';
    document.getElementById('countdown').innerHTML += minutes + 'minuter ';
    document.getElementById('countdown').innerHTML += seconds + 'sekunder';
}

timer = setInterval(showRemaining, 1000);

PHP 脚本如下：

<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Fri, 1 Jan 2010 00:00:00 GMT"); // Date in the past
header("Content-Type: text/plain; charset=utf-8"); // MIME type
$now = new DateTime();
echo $now->format("Y,m,d,H,i,s")."\n";
?>

一切正常（重定向、倒计时和时区）但是服务器时间不起作用。

这是弗兰肯斯坦创建的不同代码，所以我很确定我在某个地方搞砸了，我的猜测是我弄乱了 serverTime 函数或 showRemaining 函数（特别是 now 变量应该如何显示 serverTime 函数的结果）。

Answer 1

您正在使用的功能不同步工作。语句

$.ajax

不会等待获取（如您所料），并将立即传递到下一条语句。当您

return time

时，变量

time

尚未赋值。

您应该让

success

的

$.ajax

回调来触发更新。当获取完成时，jQuery.ajax 将使用获取的结果调用该回调。

var end = new Date(Date.UTC(2020,12-1,10,12,00,00)) ;
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

// returns another callback for setInterval to use.
function serverTime(callback) {
  // the below callback will be actually called on every setInterval trigger.
  return function () {
    var time = null;
    $.ajax({
        url: 'www.myserveradress.com/server_time.php',
        async: false, dataType: 'text',
        success: function(text) {
            time = new Date(text);
            callback(time); // ****** see this ********
        },
        error: function(http, message, exc) {
          time = new Date();
        },
    });
  }
}

function showRemaining(now) {
    if (now < end) {
        clearInterval(timer);
        window.location.href = '/surprise.html';
        return;
    }

    // gets milliseconds difference
    var distance = end.getTime() - now.getTime();
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('countdown').innerHTML = days + 'dagar ';
    document.getElementById('countdown').innerHTML += hours + 'timmar ';
    document.getElementById('countdown').innerHTML += minutes + 'minuter ';
    document.getElementById('countdown').innerHTML += seconds + 'sekunder';
}

timer = setInterval(serverTime(showRemaining), 1000);

此外，您的

server_time.php

需要返回 Javascript 的 Date 知道如何读取的字符串。例如。 RFC-2822 时间戳。

<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Fri, 1 Jan 2010 00:00:00 GMT"); // Date in the past
header("Content-Type: text/plain; charset=utf-8"); // MIME type
$now = new DateTime();

echo $now->format(DateTimeInterface::RFC2822);

相关文档：

• jQuery.ajax()
• window.setInterval()
• RFC 2822 时间戳
• 日期时间接口