JS实现倒计时功能

问题： 倒计时

思路:

1、先拿到两个时间节点之间的时间差

2、 每间隔 一秒 要获取一次, 计算一次时间差

— 定时器: setInterval()

3、问题: 目标时间 和 当前时间, 都需要每一秒获取一次吗 ?

— 目标时间不需要

— 当前时间需要

现在开始代码实现：

一、 html部分

 <!-- 先设置一个在页面显示的标签 -->
<div id="box"></div>

二、css部分

 body {
      background-color: skyblue;/*背景色*/
    }
    div {
      width: 900px;
      height: 200px;
      display: flex;/*变成弹性盒子*/
      justify-content: center;/*水平居中*/
      align-items: center;/*垂直居中*/
      font-size: 50px;
      position: fixed;/*在浏览器窗口水平垂直居中*/
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      color: skyblue;
      text-shadow: -1px -1px 0 #fff, 1px 1px 0 #000;/*文本阴影*/
    }

三、js部分

//封装好的函数求时间差 先引入进来
 <script src="./utils.js"></script>
// 1、获取目标时间
var target = new Date('2023-3-23 21:50:00')
// 2、开启定时器
var timer = setInterval(function () {
// 2-1、获取当前时间
var current = new Date()
// 2-2、利用我们封装好的函数求时间差   （可以看下一篇时间差的讲解）
var diff = diffTime(target, current)
// 3、把结果写在页面里面
var str = `距离下班 <br> 还剩 ${ diff.day } 天 ${ diff.hours } 小时 ${ diff.minutes } 分钟 ${ diff.seconds } 秒`
//  3-1、元素.innerHTML = 值
// 作用: 向元素内写入内容
//id名在js里可以直接调用
box.innerHTML = str

// 4、判断, 当 diff 对象内的 day hours minutes seconds 都是 0 的时候, 停止定时器
 if (diff.day === 0 && diff.hours === 0 && diff.minutes === 0 && diff.seconds === 0) {
       clearInterval(timer)
  }

}, 1000)

四、最终效果展示

切记：最终效果是打开页面后就开始倒计时所以一定要先调用计算时间的函数，获取当前时间的时间戳代码一定要写在函数里面。

跟着小哆不迷糊！快去试试吧~