原生js实现倒计时功能（多种格式调用）

下面是关于原生JavaScript实现倒计时功能的攻略，包含了多种格式的调用方式：

前置知识

在学习原生JavaScript实现倒计时功能前，需要掌握HTML、CSS、和基本的JavaScript语法知识。

原生JavaScript实现倒计时功能

HTML

首先，我们需要在HTML文件中创建一个具有倒计时功能的元素，例如一个 div 元素：

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

JavaScript

在JavaScript文件中，我们需要编写一个函数 countdown 实现倒计时功能，具体实现如下：

function countdown(endDate, elementId) {
  var days, hours, minutes, seconds;

  endDate = new Date(endDate).getTime();

  if (isNaN(endDate)) {
    return;
  }

  setInterval(calculate, 1000);

  function calculate() {
    var startDate = new Date();
    startDate = new Date(startDate.getUTCFullYear(),
                          startDate.getUTCMonth(),
                          startDate.getUTCDate(),
                          startDate.getUTCHours(),
                          startDate.getUTCMinutes(),
                          startDate.getUTCSeconds());

    var timeRemaining = parseInt((endDate - startDate.getTime()) / 1000);

    if (timeRemaining >= 0) {
      days = parseInt(timeRemaining / 86400);
      timeRemaining = (timeRemaining % 86400);

      hours = parseInt(timeRemaining / 3600);
      timeRemaining = (timeRemaining % 3600);

      minutes = parseInt(timeRemaining / 60);
      timeRemaining = (timeRemaining % 60);

      seconds = parseInt(timeRemaining);

      document.getElementById(elementId).innerHTML = "倒计时: "
        + days + "天, "
        + hours + "小时, "
        + minutes + "分钟, "
        + seconds + "秒";
    } else {
      return;
    }
  }
}

调用方法

接下来我们演示一下如何使用 countdown 函数来倒计时，使用不同参数的方式可以得到不同的倒计时效果。

示例1：倒计时到指定日期时间

countdown('2022-01-01 00:00:00', 'countdown');

上面的代码中，我们将 endDate 参数设置为 '2022-01-01 00:00:00'，意思是倒计时到2022年1月1日。elementId 参数设置为 'countdown'，即为我们在HTML文件中创建的 div 元素的ID属性值。

示例2：倒计时指定的时间段，例如1小时

countdown(60 * 60 * 1000, 'countdown');

上面的代码中，我们将 endDate 参数设置为 60 * 60 * 1000，意思是倒计时一个小时，把毫秒转换成小时需要乘以1000（1秒=1000毫秒），把小时转换成毫秒需要再乘以60（1小时=60分钟）、60（1分钟=60秒）和1000（1秒=1000毫秒）。

至此，你已经了解了使用原生JavaScript实现倒计时功能的具体过程。根据自己的需求，可以选择不同的参数来实现不同的倒计时效果，例如选用不同的日期时间、时间段等。