JS倒计时代码汇总

以下是详细的“JS倒计时代码汇总”的攻略。

概述

倒计时在Web开发中非常有用，比如用于处理限时优惠促销，或者用于展示一些即将到来的重要事件。本文将介绍JS倒计时的一些常用代码，帮助开发者轻松地实现倒计时功能。

普通倒计时

普通倒计时的代码非常简单，在代码中设定截止时间，然后不断更新展示倒计时的信息即可。

const deadline = new Date('2022-01-01');

function getTimeRemaining(endtime){
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor( (total/1000) % 60 );
  const minutes = Math.floor( (total/1000/60) % 60 );
  const hours = Math.floor( (total/(1000*60*60)) % 24 );
  const days = Math.floor( total/(1000*60*60*24) );
  return {
    'total': total,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime){
  const clock = document.getElementById(id);
  const daysSpan = clock.querySelector('.days');
  const hoursSpan = clock.querySelector('.hours');
  const minutesSpan = clock.querySelector('.minutes');
  const secondsSpan = clock.querySelector('.seconds');

  function updateClock(){
    const t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if(t.total<=0){
      clearInterval(timeinterval);
    }
  }

  updateClock();
  const timeinterval = setInterval(updateClock,1000);
}

initializeClock('clockdiv', deadline);

以上的代码通过获取设定的截止时间和当前时间之间的时间差计算出剩余的天数、小时、分钟和秒数，然后在页面中显示出来。同时设置一个定时器，每秒更新一次倒计时的信息，直到剩余时间为零。

带动画效果的倒计时

除了简单的倒计时外，我们通常还需要带有一些动画效果的倒计时。例如可以设定一个圆圈的形状，每秒更新圆圈的进度。下面是一个例子：

const deadline = new Date('2022-01-01');

function getTimeRemaining(endtime){
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor( (total/1000) % 60 );
  const minutes = Math.floor( (total/1000/60) % 60 );
  const hours = Math.floor( (total/(1000*60*60)) % 24 );
  const days = Math.floor( total/(1000*60*60*24) );
  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

(function() {

    const deadline = new Date('2022-01-01');

    const daysSpan = document.querySelector('.days');
    const hoursSpan = document.querySelector('.hours');
    const minutesSpan = document.querySelector('.minutes');
    const secondsSpan = document.querySelector('.seconds');

    const daysProgress = document.querySelector('.progress-day');
    const hoursProgress = document.querySelector('.progress-hour');
    const minutesProgress = document.querySelector('.progress-minute');
    const secondsProgress = document.querySelector('.progress-second');

    function calculatePercentage(total, value) {
        return Math.floor((total - value) / total * 100);
    }

    function initializeClock() {

        const totalSeconds = (getTimeRemaining(deadline)).total / 1000;

        const dayTotalSeconds = 24 * 60 * 60;
        const hourTotalSeconds = 60 * 60;
        const minuteTotalSeconds = 60;

        const dayInterval = setInterval(() => {

            if (days === 0) {
                clearInterval(dayInterval);
            }

            days--;

            const dayPercentage = calculatePercentage(dayTotalSeconds, dayTotalSeconds - (days * dayTotalSeconds));
            daysSpan.innerHTML = days < 10 ? `0${days}` : days;
            daysProgress.style.strokeDashoffset = `calc(440 - (440 * ${dayPercentage}) / 100)`;

        }, dayTotalSeconds * 1000 / totalSeconds);

        let hours = (getTimeRemaining(deadline)).hours;
        const hourInterval = setInterval(() => {

            if (hours === 0) {
                clearInterval(hourInterval);
            }

            hours--;

            const hourPercentage = calculatePercentage(hourTotalSeconds, hourTotalSeconds - (hours * hourTotalSeconds));
            hoursSpan.innerHTML = hours < 10 ? `0${hours}` : hours;
            hoursProgress.style.strokeDashoffset = `calc(440 - (440 * ${hourPercentage}) / 100)`;

        }, hourTotalSeconds * 1000 / totalSeconds);

        let minutes = (getTimeRemaining(deadline)).minutes;
        const minuteInterval = setInterval(() => {

            if (minutes === 0) {
                clearInterval(minuteInterval);
            }

            minutes--;

            const minutePercentage = calculatePercentage(minuteTotalSeconds, minuteTotalSeconds - (minutes * minuteTotalSeconds));
            minutesSpan.innerHTML = minutes < 10 ? `0${minutes}` : minutes;
            minutesProgress.style.strokeDashoffset = `calc(440 - (440 * ${minutePercentage}) / 100)`;

        }, minuteTotalSeconds * 1000 / totalSeconds);

        let seconds = (getTimeRemaining(deadline)).seconds;
        const secondInterval = setInterval(() => {

            if (seconds === 0) {
                clearInterval(secondInterval);
            }

            seconds--;

            const secondPercentage = calculatePercentage(60, 60 - seconds);
            secondsSpan.innerHTML = seconds < 10 ? `0${seconds}` : seconds;
            secondsProgress.style.strokeDashoffset = `calc(440 - (440 * ${secondPercentage}) / 100)`;

        }, 1000);

    }

    initializeClock();

})();

以上代码中，通过一个SVG圆圈来实现带有进度显示的倒计时。根据截止时间和当前时间差，计算出剩余的天数、小时、分钟和秒数。然后分别为它们设定不同的定时器，每秒钟更新一次进度条的信息，直到计时结束。同时，还需要在定时器中为展示在页面中的剩余时间更新文字信息。