网页实时显示服务器时间和javscript自运行时钟

实时显示服务器时间和JavaScript自运行时钟，是网页中经常用到的两个功能。下面我将为您介绍实现这两个功能的完整攻略。

实时显示服务器时间

实时显示服务器时间，我们需要通过向服务器发送请求来获得服务器时间，然后使用JavaScript将服务器时间实时显示在网页中。下面是实现步骤。

步骤一：通过ajax向服务器获取时间

在JavaScript中使用ajax向服务器发送请求，获取服务器的时间。以下是示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/get-time', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var serverTime = xhr.responseText;
  }
};
xhr.send(null);

在上面的代码中，我们使用XMLHttpRequest向服务器发送了一个GET请求，请求的路径是/get-time。当服务器返回响应时，我们通过xhr.responseText获取到了服务器时间。

步骤二：将服务器时间实时显示在网页中

我们将获取到的服务器时间实时显示在网页中，需要先创建一个包含时间的元素。以下是示例代码：

<div id="server-time"></div>

我们将服务器时间放在名为server-time的元素中。

然后我们可以使用JavaScript中的setInterval函数，每秒更新一次显示的时间。以下是示例代码：

setInterval(function () {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/get-time', true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var serverTime = xhr.responseText;
      document.getElementById('server-time').textContent = serverTime;//将服务器时间显示在网页中
    }
  };
  xhr.send(null);
}, 1000);

上面的代码中，setInterval函数每1秒（1000毫秒）执行一次，使用ajax从服务器获取服务器时间，并将时间实时显示在名为server-time的元素中。

JavaScript自运行时钟

JavaScript自运行时钟，顾名思义就是由JavaScript自己运行而不需要从服务器获取时间。实现这个功能需要借助JavaScript中的Date对象，以及setInterval函数。

以下是实现步骤。

步骤一：创建时钟元素

我们创建一个包含时间的元素。以下是示例代码：

<div id="clock"></div>

我们将时钟放在名为clock的元素中。

步骤二：使用Date对象获取时间

我们通过JavaScript中的Date对象，获取当前时间。以下是示例代码：

var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();

上面的代码中，我们通过new Date()获取当前时间，并分别获取时、分、秒的值。

步骤三：将时间实时显示在网页中

我们将获取到的时间实时显示在网页中，需要将时间拼接成字符串，并将字符串写入到名为clock的元素中。以下是示例代码：

setInterval(function () {
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  var timeString = hours + ':' + minutes + ':' + seconds;
  document.getElementById('clock').textContent = timeString;//将时间显示在网页中
}, 1000);

上面的代码中，setInterval函数每1秒执行一次，获取当前时间，并将时间拼接为格式字符串，最后将时间显示在名为clock的元素中。

以上就是实现实时显示服务器时间和JavaScript自运行时钟的完整攻略。