一步步教你用js简单实现新年倒计时

时间:2022-12-23 sherlockkid7 人气:0

前言

2022年已经接近尾声了，马上又是新的一年。每天都数着日子，期待放假，回家过年了。今天来简单实现一个倒计时功能，能够实时看到还有多少天就过年了。

具体实现

1. 画红灯笼

为了增加一些快过年的喜庆氛围，因此使用css实现了两个红灯笼展示到页面上。

灯笼分成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>

灯笼的顶部、底部为黄色长方形的形状，并设置不同方向边角的弧度，实现形状圆滑

.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属性设置边角的弧度，实现灯体圆滚滚的形状。使用box-shadow属性设置阴影，实现灯笼发光的效果

.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个红色、黄色相间的长条组成，给偶数的li设置黄色的背景，奇数的li设置红色的背景，并设置一个左右晃动的动画。整个灯笼也需要加上这个动画，实现在风中摇曳的效果。

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

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

2. 实现新年倒计时效果

a. 首先获取页面中展示倒计时天数、小时数、分钟数、秒数的各个元素。

b. 计算剩余时间

获取2023年除夕（1月21号）的时间戳、以及当前日期的时间戳，两个时间戳相减，得到剩余的时间，根据这个时间计算有多少天、多少小时、多少分钟、多少秒，再把计算出的相应数值展示到页面上。（ps: 当剩余时间为0或者小于0，则不用展示时间了，直接展示文字‘新年快乐’）

c. 写一个定时器，每个一秒钟，执行一次计算时间的函数，实现时间的实时改变。当剩余时间小于等于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();

3. 实现雪花纷飞的场景

根据上一篇文章《给南方的冬季，来一场纷纷扬扬的大雪》，实现下雪，突现瑞雪兆丰年的寓意

最终的效果展示

总结

加载全部内容