JS 案例1 -- 倒计时

最新推荐文章于 2023-10-23 14:16:55 发布

易小瑶~

最新推荐文章于 2023-10-23 14:16:55 发布

阅读量147

点赞数 1

文章标签： html 前端 javascript js css

本文链接：https://blog.csdn.net/m0_69021165/article/details/129735843

版权

今天介绍个好玩的 --- 倒计时

想要生成上面的页面，背景其实很好实现，主要是里面的倒计时，下面分享下倒计时的生成方法：

思路:

+ 拿到两个时间节点之间的时间差

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

=> 定时器: setInterval()

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

=> 目标时间不需要

=> 当前时间需要

代码：


<body>

  <div id="box"></div>

  <script src="./utils.js"></script>
  <script>

    // 获取目标时间
    var target = new Date('2023-3-23 15:50:00')

    // 开启定时器
    var timer = setInterval(function () {
      // 获取当前时间
      var current = new Date()

      // 利用我们封装好的函数求时间差
      var diff = diffTime(target, current)

      // 把结果写在页面里面
      var str = `距离下课 <br> 还剩 ${ diff.day } 天 ${ diff.hours } 小时 ${ diff.minutes } 分钟 ${ diff.seconds } 秒`

      // 元素.innerHTML = 值
      // 作用: 向元素内写入内容
      box.innerHTML = str

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

    }, 1000)

  </script>
</body>

utils.js文件内代码：

// 计算时间差
function diffTime(t1, t2) {
  var sub = parseInt((t1 - t2) / 1000)
  return {
    day: parseInt(sub / (60 * 60 * 24)),
    hours: parseInt(sub % (60 * 60 * 24) / (60 * 60)),
    minutes: parseInt(sub % (60 * 60) / 60),
    seconds: sub % 60
  }
}

代码执行到这里，在浏览器中显示的结果如下：

想要实现最开始的效果图，添加以下代码即可：

 <style>
    body {
      background-color: #ccc;
    }
    div {
      width: 900px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 50px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      color: #ccc;
      text-shadow: -1px -1px 0 #fff, 1px 1px 0 #000;
    }


  </style>

这样便可实现最开始的样式了。