倒计时案例

最新推荐文章于 2024-06-19 14:45:15 发布

前端小妹

最新推荐文章于 2024-06-19 14:45:15 发布

阅读量105

点赞数

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

本文链接：https://blog.csdn.net/qq_51545524/article/details/126992828

版权

js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

setInterval

<!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>
  <style>
      span {
        background-color: rgb(17, 16, 16);
        width: 30px;
        height: 30px;
        color: #fff;
      }
  </style>
</head>
<body>
  <div>
    <span class="hour">1</span>
    <span class="minute">2</span>
    <span class="second">3</span>
  </div>
  <script>
      var hour = document.querySelector('.hour')
      var minute = document.querySelector('.minute')
      var second = document.querySelector('.second')
      var inputTime = +new Date('2022-9-22 18:00:00')
      //先调用一下，刷新时就不会显示1，2，3了
      getTime()
      var time = setInterval(getTime,1000)
      //获取毫秒数
      function getTime(){
        var nowTime = +new Date()
        var times = (inputTime-nowTime)/1000
        var h = parseInt(times/60/60%24)
        h = h<10 ? '0'+ h : h
        hour.innerHTML = h
        var m =parseInt(times/60%60)
        m = m<10 ? '0'+m:m
        minute.innerHTML = m
        var s =parseInt(times % 60)
        s = s<10 ? '0'+s:s
        second.innerHTML = s
      }
  </script>
</body>
</html>