直播源码开发，前端js实现时间倒计时，天，时，分，秒

直播源码开发，前端js实现时间倒计时，天，时，分，秒

 

<!DOCTYPE html>
<html>
<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>倒计时</title>
  <style>
    .box {
      display: flex;
      line-height: 50px;
      font-size: 30px;
    }
    .box div {
      height: 50px;
      text-align: center;
      margin: 0 10px;
    }
  </style>
</head>
<body>
  <div>
    <div>08</div>天
    <div>23</div>时
    <div>59</div>分
    <div>32</div>秒
  </div>
  <script>
    function countdown(dateEnd) {
      const subsidies = (count) => count > 0 ? (count > 9 ? count.toString() : '0' + count) : '00'
      let result = new Date(dateEnd).getTime() - new Date().getTime()
      result = parseInt(result / 1000)
      let d = subsidies(Math.floor(result / (60 * 60 * 24)))
      let h = subsidies(Math.floor(result / (60 * 60 * 1) % 24))
      let m = subsidies(Math.floor(result / (60 * 1) % 60))
      let s = subsidies(Math.floor(result % 60))
      return { d, h, m, s }
    }
    
    setInterval(() => {
      showCountdown()
    }, 1000);
    showCountdown()
    function showCountdown(){
      let divs = document.querySelectorAll('.box div')
      let date = countdown('2023-1-21 00:00:00')
      divs[0].innerText = date.d
      divs[1].innerText = date.h
      divs[2].innerText = date.m
      divs[3].innerText = date.s
    }
  </script>
</body>
</html>

​

以上就是直播源码开发，前端js实现时间倒计时，天，时，分，秒， 更多内容欢迎关注之后的文章

 

posted @ 2022-09-20 14:12  云豹科技-苏凌霄  阅读(91)  评论(0)    收藏  举报