js 现在的时间距离本月月底的倒计时(html)

最新推荐文章于 2024-05-25 14:02:07 发布

DHLSP15

最新推荐文章于 2024-05-25 14:02:07 发布

阅读量1.4k

点赞数 18

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/DHLSP15/article/details/135151682

版权

现在的时间距离本月月底的倒计时

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>现在的时间距离本月月底的倒计时</title>

  <style>
    body {
      padding: 0;
      margin: 0;
    }

    .index-time {
      color: #333333;
      text-align: left;
      font-size: 28px;
      line-height: 80px;
      width: 550px;
      margin: 0 auto;
    }

    .index-date {
      color: #ff5722;
    }
  </style>
</head>

<body>
  <div class="index-time">
    <div class="index-date" id="date"></div>
    <div class="index-date" id="reachDate"></div>
    <div class="index-time-son">
      <div class="time-son-m" id="timer">
        距离指定日期：
        <span class="time-hei time-hei1">00</span> 天
        <span class="time-hei time-hei2">00</span> 小时
        <span class="time-hei time-hei3">00</span> 分
        <span class="time-hei time-hei4">00</span> 秒
      </div>
    </div>
  </div>

  <script>
    function getDays() {
      // 1.获取本月的天数
      var date = new Date();
      var year = date.getFullYear();
      var mouth = date.getMonth() + 1;
      var days = date.getDate();

      // 2.本月的天数 - 用本月已经过去的时间 （天数 小时 分钟 秒数）
      var myDate = date.getDate();
      var hours = date.getHours();
      var min = date.getMinutes();
      var second = date.getSeconds();
      var Milliseconds = date.getMilliseconds();

      // 当前日期时间
      document.getElementById('date').innerHTML = '当前时间：' + year + '-' + mouth + '-' + days + ' ' + hours + ':' + min + ':' + second;

      if (mouth == 2) {
        days = year % 4 == 0 ? 29 : 28;
      } else if (mouth == 1 || mouth == 3 || mouth == 5 || mouth == 7 || mouth == 8 || mouth == 10 || mouth == 12) {
        days = 31;
      } else {
        days = 30;
      }

      // 到达日期
      document.getElementById('reachDate').innerHTML = '指定时间：' + year + '-' + mouth + '-' + days;

      // 天数相减
      var differenceday = days - myDate - 1;
      differenceday = differenceday > 9 ? differenceday : "0" + differenceday;

      // 小时相减
      var differencehours = 1 * 23 - hours;
      differencehours = differencehours > 9 ? differencehours : "0" + differencehours;

      // 分钟相减
      var differencemin = 1 * 59 - min;
      differencemin = differencemin > 9 ? differencemin : "0" + differencemin;

      // 秒数相减
      var differencesecond = 1 * 59 - second;
      differencesecond = differencesecond > 9 ? differencesecond : "0" + differencesecond;

      // 渲染到页面上
      var timer = document.getElementById('timer');
      var span = timer.getElementsByTagName('span');
      span[0].innerHTML = differenceday;
      span[1].innerHTML = differencehours;
      span[2].innerHTML = differencemin;
      span[3].innerHTML = differencesecond;
    };
    //倒计时
    var timer = window.setInterval(function () {
      getDays();
    }, 1000);
  </script>
</body>

</html>