JS倒计时两种实现方式代码实例

下面我来详细讲解一下“JS倒计时两种实现方式代码实例”的完整攻略。

1. 倒计时实现方式一

1.1 基本思路

通过设定一个起始时间和一个截止时间，计算它们之间的时间差，并将时间差转化为时、分、秒显示在页面上，同时在每隔一秒钟更新一次时间。

1.2 代码实例

//定义起始时间、截止时间变量
var startTime = new Date('2021/10/1 00:00:00');
var endTime = new Date('2021/10/7 23:59:59');

//计算时间差
var leftTime = parseInt((endTime.getTime() - startTime.getTime()) / 1000);

//定义显示时间的元素
var showTime = document.getElementById('showTime');

//定义更新时间函数
function showLeftTime() {
  //计算剩余时间
  var hours = parseInt(leftTime / 3600);
  var minutes = parseInt((leftTime - hours * 3600) / 60);
  var seconds = leftTime % 60;

  //格式化时间显示：2位数字，不足两位前面补0
  hours = formatTime(hours);
  minutes = formatTime(minutes);
  seconds = formatTime(seconds);

  //将时间显示在页面上
  showTime.innerHTML = hours + ":" + minutes + ":" + seconds;

  //每隔1秒钟更新时间
  timer = setTimeout(function() {
    leftTime--;
    showLeftTime();
  }, 1000);
}

//定义格式化时间的函数
function formatTime(time) {
  if (time < 10) {
    return '0' + time;
  } else {
    return time;
  }
}

//调用更新时间函数
showLeftTime();

1.3 示例说明

以上代码实现了一个从2021年10月1日0时0分0秒到2021年10月7日23时59分59秒的倒计时，将剩余时间显示在id为showTime的元素中，并每隔1秒钟更新一次时间。此外，我们还定义了一个用于格式化时间的函数formatTime()，用于将时间格式化为2位数字。

2. 倒计时实现方式二

2.1 基本思路

通过设定一个总时长（以秒为单位），每隔1秒钟减1，并将减少后的剩余时长转化为时、分、秒显示在页面上。

2.2 代码实例

//定义总时长
var totalSeconds = 60 * 60 * 24 * 7;

//定义显示时间的元素
var showTime = document.getElementById('showTime');

//定义更新时间函数
function showLeftTime() {
  //计算剩余时间
  var hours = parseInt(totalSeconds / 3600);
  var minutes = parseInt(totalSeconds / 60 % 60);
  var seconds = totalSeconds % 60;

  //格式化时间显示：2位数字，不足两位前面补0
  hours = formatTime(hours);
  minutes = formatTime(minutes);
  seconds = formatTime(seconds);

  //将时间显示在页面上
  showTime.innerHTML = hours + ":" + minutes + ":" + seconds;

  //每隔1秒钟更新时间
  timer = setTimeout(function() {
    totalSeconds--;
    if (totalSeconds >= 0) {
      showLeftTime();
    } else {
      clearTimeout(timer);
      alert("时间到！");
    }
  }, 1000);
}

//定义格式化时间的函数
function formatTime(time) {
  if (time < 10) {
    return '0' + time;
  } else {
    return time;
  }
}

//调用更新时间函数
showLeftTime();

2.3 示例说明

以上代码实现了一个倒计时时长为1周的计时器，将剩余时间显示在id为showTime的元素中，并每隔1秒钟更新一次时间。当倒计时结束时，弹出一个提示框。此外，我们还定义了一个用于格式化时间的函数formatTime()，用于将时间格式化为2位数字。