js 倒计时（高效率服务器时间同步）

2023年5月27日上午3:47 • JavaScript

关于“js 倒计时（高效率服务器时间同步）”的完整攻略，以下是详细的讲解过程。

什么是“js 倒计时（高效率服务器时间同步）”

“js 倒计时（高效率服务器时间同步）”是指利用 JavaScript 实现网页倒计时显示，并且能够与服务器时间同步，保证倒计时的准确性。同时，为了保证效率，要尽量减少对服务器的请求，提升用户体验。

倒计时的实现方式

客户端倒计时

客户端倒计时是指直接使用 JavaScript 执行倒计时操作，显示倒计时并在倒计时结束后执行相应操作。这种方式的好处是可以减少对服务器的请求，但是由于客户端时间可能出现误差、用户可能修改本地时间等问题，导致倒计时不准确。

以下是一个示例代码，实现了一个简单的倒计时（以秒为单位）：

<div id="countdown"></div>
<script>
var sec = 60;
var timer = setInterval(function() {
  if (sec <= 0) {
    clearInterval(timer);
    document.getElementById("countdown").innerHTML = "倒计时结束";
  } else {
    document.getElementById("countdown").innerHTML = sec + " 秒后结束";
    sec--;
  }
}, 1000);
</script>

服务器端倒计时

服务器端倒计时是指在服务器端执行倒计时操作，并将倒计时的剩余时间返回给客户端进行显示。这种方式能够保证倒计时的准确性，但是需要频繁请求服务器，对服务器压力较大，同时也会影响用户体验。

以下是一个示例代码，实现了一个简单的倒计时（以秒为单位）：

PHP 文件，用于获取倒计时结束时间并返回剩余时间：

<?php
$endtime = strtotime("2022-01-01 00:00:00"); // 倒计时结束时间
$nowtime = time(); // 当前时间
$lefttime = $endtime - $nowtime; // 剩余时间
echo $lefttime;
?>

JavaScript 代码，用于获取服务器返回的剩余时间并执行倒计时：

<div id="countdown"></div>
<script>
var timer = setInterval(function() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var leftsec = parseInt(xmlhttp.responseText); // 剩余时间（秒）
      if (leftsec <= 0) {
        clearInterval(timer);
        document.getElementById("countdown").innerHTML = "倒计时结束";
      } else {
        var leftmin = parseInt(leftsec / 60);
        var leftsec = leftsec % 60;
        document.getElementById("countdown").innerHTML = leftmin + " 分钟 " + leftsec + " 秒后结束";
      }
    }
  }
  xmlhttp.open("GET", "get_lefttime.php", true);
  xmlhttp.send();
}, 1000);
</script>

服务器时间同步的实现方式

为了避免客户端时间误差等问题，我们可以通过获取服务器时间并与客户端时间进行比对，从而保证倒计时的准确性。以下是两种常用的实现方式：

AJAX 获取服务器时间

使用 AJAX 技术，发送异步请求获取服务器时间。服务器返回响应时，获取响应头中的 Date 字段，即可获取服务器时间。

以下是一个示例代码：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var serverDate = new Date(xmlhttp.getResponseHeader("Date"));
    var clientDate = new Date();
    var diff = serverDate - clientDate;
    // diff 即为服务器时间与客户端时间的时间差（毫秒数）
  }
}
xmlhttp.open("HEAD", "test.php", true);
xmlhttp.send();

页面嵌入服务器时间

在服务器端将当前时间嵌入页面中，通过 JavaScript 获取该时间，并与客户端时间进行比对。

以下是一个示例代码：

<span id="serverTime"><?php echo date("Y-m-d H:i:s"); ?></span>
<script>
var serverTime = new Date(document.getElementById("serverTime").innerHTML);
var clientTime = new Date();
var diff = serverTime - clientTime;
// diff 即为服务器时间与客户端时间的时间差（毫秒数）
</script>