一步步教你用js簡單實現(xiàn)新年倒計時

更新時間：2022年12月23日 09:55:39 作者：sherlockkid7

一轉(zhuǎn)眼已經(jīng)臘月了,相信小伙伴們一定想知道我們距離2023新年還有多少天,下面這篇文章主要給大家介紹了關(guān)于如何一步步教你用js簡單實現(xiàn)新年倒計時的相關(guān)資料,需要的朋友可以參考下

前言

2022年已經(jīng)接近尾聲了，馬上又是新的一年。每天都數(shù)著日子，期待放假，回家過年了。今天來簡單實現(xiàn)一個倒計時功能，能夠?qū)崟r看到還有多少天就過年了。

具體實現(xiàn)

1. 畫紅燈籠

為了增加一些快過年的喜慶氛圍，因此使用css實現(xiàn)了兩個紅燈籠展示到頁面上。

燈籠分成4個部分組成，燈籠頂部、燈籠主體、燈籠底部、燈籠穗。

<div class="lantern">
  <div class="lantern-top"></div>
  <div class="lantern-inner">
    福
  </div>
  <div class="lantern-bottom"></div>
  <ul class="ribbons">
    <li></li>
    ...
  </ul>
</div>

燈籠的頂部、底部為黃色長方形的形狀，并設(shè)置不同方向邊角的弧度，實現(xiàn)形狀圓滑

.lantern-top,
.lantern-bottom {
  margin: 0 auto;
  position: relative;
  width: 25%;
  height: 7%;
  background-color: #ffd700;
  z-index: 11;

}

.lantern-top {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

燈籠主體為寬高一致的正方形，并使用border-radius屬性設(shè)置邊角的弧度，實現(xiàn)燈體圓滾滾的形狀。使用box-shadow屬性設(shè)置陰影，實現(xiàn)燈籠發(fā)光的效果

.lantern-inner {
  width: 50%;
  height: 50%;
  margin: 0 auto;
  position: relative;
  font-size: 60px;
  color: #ffd700;
  border-radius: 40px;
  box-shadow: 0px 0px 206px 34px rgba(250, 108, 0, 1);
  background-color: #f00;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
}

燈穗由10個紅色、黃色相間的長條組成，給偶數(shù)的li設(shè)置黃色的背景，奇數(shù)的li設(shè)置紅色的背景，并設(shè)置一個左右晃動的動畫。整個燈籠也需要加上這個動畫，實現(xiàn)在風(fēng)中搖曳的效果。

@keyframes wobble {
  0%,
  100% {
    transform: rotate(3deg);
  }

  50% {
    transform: rotate(-3deg);
  }
}

2. 實現(xiàn)新年倒計時效果

a. 首先獲取頁面中展示倒計時天數(shù)、小時數(shù)、分鐘數(shù)、秒數(shù)的各個元素。

b. 計算剩余時間

獲取2023年除夕（1月21號）的時間戳、以及當前日期的時間戳，兩個時間戳相減，得到剩余的時間，根據(jù)這個時間計算有多少天、多少小時、多少分鐘、多少秒，再把計算出的相應(yīng)數(shù)值展示到頁面上。（ps: 當剩余時間為0或者小于0，則不用展示時間了，直接展示文字‘新年快樂’）

c. 寫一個定時器，每個一秒鐘，執(zhí)行一次計算時間的函數(shù)，實現(xiàn)時間的實時改變。當剩余時間小于等于1秒鐘，則可以清除定時器，不用計算剩余時間了

const countText = document.querySelector('.count-down')
const d = document.querySelector('.days');
const h = document.querySelector('.hours');
const m = document.querySelector('.minutes');
const s = document.querySelector('.seconds');

function getTrueNumber(num) {
  return num < 10 ? "0" + num : num;
}

function calculateRemainingTime() {
  const comingYear = new Date().getFullYear() + 1;
  const comingDate = new Date(`Jan 21, ${comingYear} 00:00:00`);

  const now = new Date();
  const remainingTime = comingDate.getTime() - now.getTime();
  const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
  const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const mins = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
  const secs = Math.floor((remainingTime % (1000 * 60)) / 1000);

  d.innerHTML = getTrueNumber(days);
  h.innerHTML = getTrueNumber(hours);
  m.innerHTML = getTrueNumber(mins);
  s.innerHTML = getTrueNumber(secs);
  
  if(remainingTime <= 0){
    countText.innerHTML = '新年快樂'
  }
  return remainingTime;
}

function initCountdown() {
  const interval = setInterval(() => {
    const remainingTimeInMs = calculateRemainingTime();
    if (remainingTimeInMs <= 1000) {
      clearInterval(interval);
    }

  }, 1000);
}

initCountdown();