快捷導(dǎo)航

一步步教你用js簡(jiǎn)單實(shí)現(xiàn)新年倒計(jì)時(shí)

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

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

前言

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

具體實(shí)現(xiàn)

1. 畫紅燈籠

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

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

<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>

燈籠的頂部、底部為黃色長(zhǎng)方形的形狀，并設(shè)置不同方向邊角的弧度，實(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è)置邊角的弧度，實(shí)現(xiàn)燈體圓滾滾的形狀。使用box-shadow屬性設(shè)置陰影，實(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個(gè)紅色、黃色相間的長(zhǎng)條組成，給偶數(shù)的li設(shè)置黃色的背景，奇數(shù)的li設(shè)置紅色的背景，并設(shè)置一個(gè)左右晃動(dòng)的動(dòng)畫。整個(gè)燈籠也需要加上這個(gè)動(dòng)畫，實(shí)現(xiàn)在風(fēng)中搖曳的效果。

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

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

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

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

b. 計(jì)算剩余時(shí)間

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

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

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();

3. 實(shí)現(xiàn)雪花紛飛的場(chǎng)景

根據(jù)上一篇文章《給南方的冬季，來(lái)一場(chǎng)紛紛揚(yáng)揚(yáng)的大雪》，實(shí)現(xiàn)下雪，突現(xiàn)瑞雪兆豐年的寓意

最終的效果展示

總結(jié)

到此這篇關(guān)于用js簡(jiǎn)單實(shí)現(xiàn)新年倒計(jì)時(shí)的文章就介紹到這了,更多相關(guān)js實(shí)現(xiàn)新年倒計(jì)時(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: