纯js实现倒计时功能——滚动式

原创已于 2024-11-19 15:20:23 修改

· 231 阅读

0 ·

版权

文章标签：

#javascript #开发语言 #ecmascript

于 2024-11-19 15:20:01 首次发布

效果：

html代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>倒计时-滚动式</title>
    <link rel="stylesheet" type="text/css" href="./demo.css" />
  </head>
  <body>
    <div
      class="header-count-down"
      id="header-count-down"
      data-show-time="2024/11/08 12:00 GMT +08:00"
      data-end-time="2024/11/19 18:30 GMT +08:00"
    >
      <div class="count-down-time count-down-days">
        <div class="count-down-number">
          <span>00</span>
          <span></span>
        </div>
        <span>Days</span>
      </div>
      <div class="count-down-time count-down-hours">
        <div class="count-down-number">
          <span>00</span>
          <span></span>
        </div>
        <span>Hours</span>
      </div>
      <div class="count-down-time count-down-minutes">
        <div class="count-down-number">
          <span>00</span>
          <span></span>
        </div>
        <span>Minutes</span>
      </div>
      <div class="count-down-time count-down-seconds">
        <div class="count-down-number">
          <span>00</span>
          <span></span>
        </div>
        <span>Seconds</span>
      </div>
    </div>
    <script src="./demo.js"></script>
  </body>
</html>

css代码：

.header-count-down {
  width: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  height: 50px;
  color: rgb(255, 229, 0);
  background-color: #000;
  z-index: 111111;
}
.header-count-down .count-down-time {
  padding: 0 10px;
  line-height: 1;
}
.header-count-down .count-down-time:not(:nth-child(4)) {
  border-right: 1px dashed #fff;
}
.header-count-down .count-down-time span {
  display: block;
  text-align: center;
  font-size: 12px;
}

.header-count-down a::after {
  display: none;
}
.header-count-down .count-down-number {
  height: 20px;
  overflow: hidden;
}
.header-count-down .count-down-number span {
  font-size: 20px;
  overflow: hidden;
}

.header-count-down a {
  display: none;
}
.header-count-down span.pc {
  display: none;
}
.header-count-down span.wap {
  display: inline-block;
}
@media screen and (min-width: 990px) {
  .header-count-down span.wap {
    display: none;
  }
  .header-count-down span.pc {
    display: inline-block;
  }
  .header-count-down a {
    display: inline-block;
  }
}

js代码：

window.onload = () => {
  const countDownEl = document.getElementsByClassName("header-count-down")[0];

  if (countDownEl) {
    initCountDown(countDownEl);
  }
};

function initCountDown(countDownEl) {
  let activityShowTime = countDownEl.getAttribute("data-show-time");
  let activityEndTime = countDownEl.getAttribute("data-end-time");

  const countDayEl = countDownEl.getElementsByClassName("count-down-days")[0];
  const countHourEl = countDownEl.getElementsByClassName("count-down-hours")[0];
  const countMinuteEl =
    countDownEl.getElementsByClassName("count-down-minutes")[0];
  const countSecondEl =
    countDownEl.getElementsByClassName("count-down-seconds")[0];
  const nowTime = new Date().getTime();

  if (
    !activityEndTime ||
    !activityShowTime ||
    nowTime > new Date(activityEndTime).getTime() ||
    nowTime < new Date(activityShowTime).getTime()
  ) {
    countDownEl.style.display = "none";
  } else {
    countDownEl.style.display = "flex";

    start({
      countDownEl: countDownEl,
      showTime: activityShowTime,
      endTime: activityEndTime,
      dayEl: countDayEl,
      hourEl: countHourEl,
      minuteEl: countMinuteEl,
      secondEl: countSecondEl,
    });
  }
}
function start({
  countDownEl,
  showTime,
  endTime,
  dayEl,
  hourEl,
  minuteEl,
  secondEl,
}) {
  let times = 0,
    days,
    hours,
    minutes,
    seconds;

  let timerSecond = setInterval(() => {
    times = Math.round(
      (new Date(endTime).getTime() - new Date().getTime()) / 1000
    );
    if (times < 0) {
      clearInterval(timerSecond);
      countDownEl.style.display = "none";
      return;
    }
    days = Math.floor(times / 60 / 60 / 24);
    hours = Math.floor((times % (60 * 60 * 24)) / 60 / 60);
    minutes = Math.floor((times % 3600) / 60);
    seconds = times % 60;

    if (times > 60 * 60 * 24) {
      if (dayEl.children?.[0]?.children?.length > 1) {
        dayEl.children[0].children[0].innerText = addZero(days);
        dayEl.children[0].children[1].innerText = addZero(
          days === 0 ? days : days - 1
        );
      }
    }
    if (times > 60 * 60) {
      if (hourEl.children?.[0]?.children?.length > 1) {
        hourEl.children[0].children[0].innerText = addZero(hours);
        hourEl.children[0].children[1].innerText = addZero(
          hours === 0 ? 23 : hours - 1
        );
      }
    }
    if (times > 60) {
      if (minuteEl.children?.[0]?.children?.length > 1) {
        minuteEl.children[0].children[0].innerText = addZero(minutes);
        minuteEl.children[0].children[1].innerText = addZero(
          minutes === 0 ? 59 : minutes - 1
        );
      }
    }
    if (secondEl.children?.[0]?.children?.length > 1) {
      secondEl.children[0].children[0].innerText = addZero(seconds);
      secondEl.children[0].children[1].innerText = addZero(
        seconds === 0 ? 59 : seconds - 1
      );
    }
    let dayNumberEls = dayEl.children[0].children;
    let hourNumberEls = hourEl.children[0].children;
    let minutesNumberEls = minuteEl.children[0].children;
    let secondNumberEls = secondEl.children[0].children;
    let height = secondNumberEls[0].clientHeight;

    //秒
    let nextSecondEL = document.createElement("span");
    nextSecondEL.innerText = addZero(seconds);

    //分
    minutesNumberEls[0].innerText = addZero(minutes);
    let nextMinuteEl;
    if (seconds === 0 && times > 60) {
      nextMinuteEl = document.createElement("span");
      nextMinuteEl.innerText = addZero(minutes);
    }

    //时
    let nextHourEl;
    if (minutes === 0 && seconds === 0 && times > 60 * 60) {
      nextHourEl = document.createElement("span");
      nextHourEl.innerText = addZero(hours);
    }
    
    //日
    let nextDayEl;
    if (hours === 0 && minutes === 0 && seconds === 0 && times > 60 * 60 * 24) {
      nextDayEl = document.createElement("span");
      nextDayEl.innerText = addZero(hours);
    }

    let timer = setInterval(() => {
      let styles = `translate(0px, ${height-- - 20}px)`;
      if (
        hours === 0 &&
        minutes === 0 &&
        seconds === 0 &&
        times >= 60 * 60 * 24
      ) {
        dayNumberEls[0].style.transform = styles;
        dayNumberEls[1] && (dayNumberEls[1].style.transform = styles);
      }
      if (minutes === 0 && seconds === 0 && times >= 60 * 60) {
        hourNumberEls[0].style.transform = styles;
        hourNumberEls[1] && (hourNumberEls[1].style.transform = styles);
      }
      if (seconds === 0 && times > 60) {
        minutesNumberEls[0].style.transform = styles;
        minutesNumberEls[1] && (minutesNumberEls[1].style.transform = styles);
      }
      if (times > 0) {
        secondNumberEls[0].style.transform = styles;
        secondNumberEls[1].style.transform = styles;
      }
      if (height <= 0) {
        clearInterval(timer);
        if (times) {
          secondNumberEls[1].style.transform = `translate(0px,0px)`;
          secondEl.children[0].removeChild(secondNumberEls[0]);
          secondEl.children[0].appendChild(nextSecondEL);
        }
        if (
          hours === 0 &&
          minutes === 0 &&
          seconds === 0 &&
          times > 60 * 60 * 24
        ) {
          dayNumberEls[1].style.transform = `translate(0px,0px)`;
          dayEl.children[0].removeChild(dayNumberEls[0]);
          dayEl.children[0].appendChild(nextDayEl);
        }
        if (minutes === 0 && seconds === 0 && times > 60 * 60) {
          hourNumberEls[1].style.transform = `translate(0px,0px)`;
          hourEl.children[0].removeChild(hourNumberEls[0]);
          hourEl.children[0].appendChild(nextHourEl);
        }
        if (seconds === 0 && times > 60) {
          minutesNumberEls[1].style.transform = `translate(0px,0px)`;
          minuteEl.children[0].removeChild(minutesNumberEls[0]);
          minuteEl.children[0].appendChild(nextMinuteEl);
        }
      }
    }, 10);
  }, 1000);
}
function addZero(number) {
  let str = String(number);

  return str.length === 0 ? "00" : str.length === 1 ? `0${str}` : str;
}