js原生超级简单倒计时

//样式

<style>

    .box {

      width: 400px;

      height: 350px;

      background: #e83632;

      margin: auto;

      color: #fff;

      text-align: center;

    }

 

    .box h5 {

      padding-top: 10px;

    }

 

    .box h2 {

      padding-left: 30px;

    }

 

    .top {

      display: flex;

      justify-content: space-around;

      align-items: center;

    }

 

    .top .god {

      width: 30px;

      height: 30px;

      background: #2f3430;

      text-align: center;

 

    }

 

    .top .god span {

      padding-top: 5px;

      display: block;

    }

 

    .top .ck span {

      font-size: 22px;

    }

  </style>

//布局结构

<div class="box">

    <h5></h5>

    <h2>离春节还有：</h2>

    <div class="top">

      <div class="god"><span class="day"></span></div>

      <div class="ck"><span class="day">天</span></div>

      <div class="god"><span class="hours"></span></div>

      <div class="ck"><span class="day">时</span></div>

      <div class="god"><span class="minutes"></span></div>

      <div class="ck"><span class="day">分</span></div>

      <div class="god"><span class="seconds"></span></div>

      <div class="ck"><span class="day">秒</span></div>

    </div>

  </div>

//Js实现

<script>

    //获取年月日

    function getDay() {

      const date = new Date();

      const yer = date.getFullYear();

      const month = date.getMonth() + 1;

      const day = date.getDate();

      const h5 = document.querySelector('h5');

      const tim = `今天是${yer}年${month}月${day}日`

      h5.innerHTML = tim;

      return h5

    }

    getDay();

//补零

    function getZero(num) {

      return num >= 10 ? num : "0" + num

    }

    //倒计时

    function getCount() {

//获取当前时间戳

      const date = +new Date();

//获取将来时间戳

      const lat = +new Date('2024-2-10 00:00:00');

//用将来时间戳-现在时间戳/1000转为秒

      const count = (lat - date) / 1000;

//拿剩余的时间利用公式求出剩下的天、时、分、秒

      const day = getZero(parseInt(count / 60 / 60 / 24));

      const hours = getZero(parseInt(count / 60 / 60 % 24));

      const minutes = getZero(parseInt(count / 60 % 60));

      const seconds = getZero(parseInt(count % 60));

//渲染到页面

      let days = document.querySelector('.day')

      days.innerHTML = day;

      let hour = document.querySelector('.hours')

      hour.innerHTML = hours;

      let minute = document.querySelector('.minutes')

      minute.innerHTML = minutes;

      let second = document.querySelector('.seconds')

      second.innerHTML = seconds;

    }

    getCount()

    setInterval(function () {

      getCount()

    }, 1000)

//随机颜色true则

    function getColor(flg) {

      if (flg) {

        let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];

        let str = '#';

        for (let i = 0; i < 6; i++) {

          let rad = Math.floor(Math.random() * arr.length);

          str += arr[rad]

        }

        return str;

      } else {

        const r = Math.floor(Math.random() * 256);

        const g = Math.floor(Math.random() * 256);

        const b = Math.floor(Math.random() * 256);

        const rgb = `rgb(${r},${g},${b})`

        return rgb

      }

    }

    const box = document.querySelector('.box');

    box.style.background = getColor(true)

    console.log(getColor(true))

  </script>