js实现网页倒计时、网站已运行时间功能的代码3例

下面是详细讲解“js实现网页倒计时、网站已运行时间功能的代码3例”的完整攻略，内容包括两条示例说明。

JS实现网页倒计时

实现思路

倒计时的实现主要依赖JavaScript中的Date对象，首先获取目标时间与当前时间的差值，然后以一定时间间隔进行更新，直到倒计时结束。在更新的过程中需要计算出剩余的天数、小时数、分钟数和秒数，最后将倒计时显示在页面上。

代码示例

HTML

<div id="timer">
  <span id="days"></span>天
  <span id="hours"></span>小时
  <span id="minutes"></span>分钟
  <span id="seconds"></span>秒
</div>

JavaScript

// 设置目标时间，比如到2022年5月1日9点12分0秒
var targetTime = new Date('2022-05-01T09:12:00');

// 设置倒计时的时间间隔，比如1秒钟
var interval = 1000;

// 开始倒计时
var timer = setInterval(function () {
  // 获取当前时间
  var currentTime = new Date();

  // 计算剩余的时间差，以毫秒为单位
  var timeDiff = targetTime - currentTime;

  // 如果倒计时结束，清除计时器
  if (timeDiff <= 0) {
    clearInterval(timer);
    return;
  }

  // 计算剩余的天数、小时数、分钟数和秒数
  var days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
  var hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

  // 将剩余时间显示在页面上
  document.getElementById('days').innerText = days;
  document.getElementById('hours').innerText = hours;
  document.getElementById('minutes').innerText = minutes;
  document.getElementById('seconds').innerText = seconds;
}, interval);

JS实现网站已运行时间功能

实现思路

网站已运行时间的实现依赖JavaScript中的Date对象，首先获取网站创建或上线的时间，然后与当前时间进行计算，最后将结果显示在页面上。

代码示例

HTML

<p>本站已运行<span id="uptime"></span></p>

JavaScript

// 设置网站创建或上线的时间，比如2020年1月1日9点0分0秒
var startTime = new Date('2020-01-01T09:00:00');

// 设置计时器的时间间隔，比如1秒钟
var interval = 1000;

// 开始计时
var timer = setInterval(function () {
  // 获取当前时间
  var currentTime = new Date();

  // 计算网站已运行的时间，以毫秒为单位
  var uptime = currentTime - startTime;

  // 计算天数、小时数、分钟数和秒数
  var days = Math.floor(uptime / (1000 * 60 * 60 * 24));
  var hours = Math.floor((uptime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((uptime % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((uptime % (1000 * 60)) / 1000);

  // 将网站已运行的时间显示在页面上
  document.getElementById('uptime').innerText = days + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒';
}, interval);

以上是两个简单的示例说明，可以根据需求进行适当的修改和优化。希望对你有帮助。