js封装倒计时函数实现倒计时效果

最新推荐文章于 2024-07-05 16:41:23 发布

Cirrod

最新推荐文章于 2024-07-05 16:41:23 发布

阅读量888

点赞数 1

分类专栏： Javascript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/h18377528386/article/details/126537466

版权

Javascript 专栏收录该内容

34 篇文章 8 订阅

订阅专栏

一、倒计时函数，函数接受预定时间的时间戳，返回倒计时文本

    function time(futureTime) {
      //5.1获取当前时间的时间戳
      const nowTime = +new Date()
      // 5.2获取预定时间戳与当前时间戳的秒数差
      const countdowntime = (futureTime - nowTime) / 1000
      // 5.3获取剩余天数
      const r = format(parseInt(countdowntime / 60 / 60 / 24))
      // 5.4获取剩余小时
      const s = format(parseInt(countdowntime / 60 / 60 % 24))
      // 5.5获取剩余分钟
      const f = format(parseInt(countdowntime / 60 % 60))
      // 5.6获取剩余秒
      const m = format(parseInt(countdowntime % 60))
      //  5.7返回倒计时封装信息的字符串
      return `距离2022年8月30号 24:00:00到现在还有
      <br/><span>${r}天${s}小时${f}分钟${m}秒</span>`
    }

二、完整案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  span {
    color: red;
  }
</style>

<body>
  <h1></h1>
  <script>
    //1.获取h1标签dom元素对象
    const h1 = document.querySelector("h1")
    // 2.获取倒计时预定时间的时间戳
    const futureTime = +new Date('2022-8-30 24:00:00')
    // 3.当dom结构生成时初始化页面
    window.addEventListener("DOMContentLoaded", () => {
      // 3.1设置h1标签的文本值
      h1.innerHTML = time(futureTime)
    })
    // 4.开启定时器函数，每隔一秒重新渲染倒计时
    setInterval(() => {
      // 4.1设置h1标签的文本值
      h1.innerHTML = time(futureTime)
    }, 1000)


    //5.封装倒计时时间函数，接受预定时间的时间戳
    function time(futureTime) {
      //5.1获取当前时间的时间戳
      const nowTime = +new Date()
      // 5.2获取预定时间戳与当前时间戳的秒数差
      const countdowntime = (futureTime - nowTime) / 1000
      // 5.3获取剩余天数
      const r = format(parseInt(countdowntime / 60 / 60 / 24))
      // 5.4获取剩余小时
      const s = format(parseInt(countdowntime / 60 / 60 % 24))
      // 5.5获取剩余分钟
      const f = format(parseInt(countdowntime / 60 % 60))
      // 5.6获取剩余秒
      const m = format(parseInt(countdowntime % 60))
      //  5.7返回倒计时封装信息的字符串
      return `距离2022年8月30号 24:00:00到现在还有
      <br/><span>${r}天${s}小时${f}分钟${m}秒</span>`
    }
    //  6.封装补0函数
    function format(params) {
      return params < 10 ? '0' + params : params
    }
  </script>
</body>

</html>