JS实现倒计时功能

问题：倒计时

思路:

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

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

— 定时器: setInterval()

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

— 目标时间不需要

— 当前时间需要

现在开始代码实现：

一、html 部分

二、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 部分

// 封装好的函数求时间差 先引入进来
 
// 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 = ` 距离下班 
 还剩 ${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)

四、最终效果展示

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

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