javascript 倒计时 服务器时间

2023-04-17 14:09:26 北斗时源

要使用 JavaScript 创建一个倒计时,并基于服务器时间更新它,您需要使用以下步骤:


使用 JavaScript 获取服务器时间。您可以使用 AJAX 技术通过后端脚本(如 PHP、ASP.NET 等)来获取服务器时间。在此例中,我们将使用 PHP 后端脚本来获取服务器时间。


php

Copy code

<?php

$date = date('Y-m-d H:i:s');

echo $date;

?>

在 JavaScript 中,使用 AJAX 调用 PHP 脚本并获取服务器时间。


javascript

Copy code

function getServerTime() {

  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {

      var serverTime = new Date(this.responseText);

      var now = new Date();

      startCountdown(serverTime, now);

    }

  };

  xhttp.open("GET", "getservertime.php", true);

  xhttp.send();

}

在上面的代码中,我们使用 XMLHttpRequest 对象来异步加载 PHP 脚本并获取服务器时间。一旦获得了服务器时间,我们使用 Date 对象创建一个服务器时间对象和一个当前时间对象,并将它们传递给 startCountdown 函数。


创建一个 startCountdown 函数来启动倒计时并更新它。这个函数将计算时间差,创建一个计时器并在每个间隔更新倒计时。


javascript

Copy code

function startCountdown(serverTime, now) {

  var countdown = new Date(serverTime - now);

  var minutes = countdown.getMinutes();

  var seconds = countdown.getSeconds();

  var countdownElement = document.getElementById("countdown");

  countdownElement.innerHTML = minutes + "m " + seconds + "s";

  setInterval(function() {

    seconds--;

    if (seconds < 0) {

      seconds = 59;

      minutes--;

    }

    countdownElement.innerHTML = minutes + "m " + seconds + "s";

  }, 1000);

}

在上面的代码中,我们创建了一个倒计时对象,使用 setInterval 函数在每秒更新倒计时,并使用 getElementById 函数找到 HTML 元素以更新它。


最后,您需要在 HTML 中添加一个倒计时元素,然后在文档加载完成后调用 getServerTime 函数。


html

Copy code

<div id="countdown"></div>

<script>

window.onload = function() {

  getServerTime();

};

</script>

在上面的代码中,我们使用 div 元素来显示倒计时,并使用 window.onload 事件调用 getServerTime 函数来获取服务器时间并启动倒计时。


通过以上步骤,您可以使用 JavaScript 创建一个倒计时,并基于服务器时间更新它。


首页
产品
联系
Baidu
map