前端：春节倒计时的简单实现

最新推荐文章于 2025-01-01 00:03:47 发布

z_鑫

最新推荐文章于 2025-01-01 00:03:47 发布

阅读量842

点赞数 7

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/2401_85816985/article/details/143983589

版权

前端专栏收录该内容

3 篇文章

订阅专栏

一、前言

时间如白驹过隙，一转眼也快要年末了，感受着春节一天接一天的靠近，突然想到了用倒计时来进行记录，这应该能更直观的感受春节的临近。因此，我在这里跟大家分享一下春节倒计时的前端实现。

二、效果图及分析

1、首先，我们来看一下上面这个效果图。当然，由于这个图是静态的，所以效果不是那么好。因为这是每一秒都在变化的，所以我们要设置定时器来进行操作。

2、接下来要注意的是，第一行的“今天是2024年11月22日”，以及中间的“67天 02：06：11”是动态变化的，所以要设立两个定时器来进行渲染。一个用来展示当前的时间，另一个用来展示现在距离春节还剩多少时间。

3、进行定时器中的函数编写时，由于我们要将时间直观的展示出来，所以不可避免地要用到时间戳（用 new Date() 来进行获取）。第一个定时器只需要当前的时间戳来进行操作，但第二个定时器就稍微上点难度，需要用到两个时间戳，分别时当前的时间戳和将来春节的时间戳。将两个时间戳获取到后，先做减法（将来春节的时间戳 - 当前的时间戳），再将其结果进行计算就可以得到现在距离春节还剩多少时间了。

4、还需注意的是，在用 new Date() 时，得到的数据是以毫秒为单位。

三、代码

1、html

<div class="countdown">
    <p class="next"></p>
    <p class="title">春节倒计时</p>
    <p class="days">
      <span></span>
    </p>
    <p class="clock">
      <span id="hours">00</span>
      <i>:</i>
      <span id="minutes">00</span>
      <i>:</i>
      <span id="seconds">00</span>
    </p>
    <p class="tips">2025/01/29春节</p>
</div>

2、css


    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    .countdown {
      display: flex;
      flex-direction: column;
      margin: 30px auto;
      padding: 40px 30px;
      width: 350px;
      height: 450px;
      background-color: rgb(157, 44, 44);
      text-align: center;
      border-radius: 5px;
    }

    .countdown p {
      color: #fff;
    }

    .countdown .next {
      font-size: 20px;
      margin-bottom: 30px;
    }

    .countdown .title {
      font-size: 50px;
      margin-bottom: 30px;
    }

    .countdown .clock {
      flex: 1;
      font-size: 30px;
    }

    .countdown .clock span {
      padding: 2px 5px;
      background-color: #333;
      border-radius: 5px;
    }

    .countdown .clock i {
      font-style: normal;
    }

    .countdown .tips {
      font-size: 30px;
    }

    .countdown .days {
      margin-bottom: 30px;
      font-size: 50px;
    }
    
    .countdown .days span {
      padding: 2px 5px;
      color: gold;
    }

3、js

// 一、最顶部的日期 --- 当天时间
    (function(){
      // 1.获取时间
      const next = document.querySelector('.countdown .next')
      const date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()

      // 2.补零
      m = m < 10 ? '0' + m : m
      d = d < 10 ? '0' + d : d

      // 3.渲染
      next.innerHTML = `今天是${y}年${m}月${d}日` // 防止最开始的一秒没被渲染到
      setInterval(function () {
        const date = new Date()
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        let d = date.getDate()

        m = m < 10 ? '0' + m : m
        d = d < 10 ? '0' + d : d

        next.innerHTML = `今天是${y}年${m}月${d}日`
      }, 1000)
    })();
    
    // 二、倒计时
    function clock () {
      // 1.现在的时间戳
      const now = +new Date()

      // 2.将来的时间戳
      const last = +new Date('2025-1-29 00:00:00')

      // 3.计算
      const count = (last - now) / 1000
      let d = parseInt(count / 60 / 60 / 24)
      let h = parseInt(count / 60 / 60 % 24)
      let m = parseInt(count / 60 % 60)
      let s = parseInt(count % 60)

      // 4.补零
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s

      // 5.获取对象
      const days = document.querySelector('.countdown .days span')
      const hours = document.querySelector('#hours')
      const minutes = document.querySelector('#minutes')
      const seconds = document.querySelector('#seconds')

      // 6.渲染
      days.innerHTML = `${d}天`
      hours.innerHTML = h
      minutes.innerHTML = m
      seconds.innerHTML = s
    }
    
    clock() // 必须先调用一次来进行渲染，不然最开始的一秒是没被渲染到的
    setInterval(clock, 1000)