html+css+javascript,用date完成，距离某一天还有多少天

沐雨程程

已于 2022-12-26 15:57:44 修改

阅读量2.1k

点赞数 3

文章标签： html css javascript

于 2020-12-11 22:23:10 首次发布

本文链接：https://blog.csdn.net/HHyuang/article/details/111053402

版权

html+css+javascript,用date完成，距离某一天还有多少天

一. 用date完成距离某一天还有多少天

一. 用date完成距离某一天还有多少天

1.图片展示
注：因为不是视频，所以看不到每秒更新效果

二.HTML部分代码

<body>
<h1 class="title">距离双十二，还有</h1>

  <div class="time-item">
    <span><span id="day">00</span>天</span>
    <strong><span id="hour">00</span>时</strong>
    <strong><span id="minute">00</span>分</strong>
    <strong><span id="second">00</span>秒</strong>
  </div>
</body>

这是简单的html代码，我就不多说了，有什么不懂的可以留言，我为你解答。

三.CSS部分

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

    .time-item {
      width: 430px;
      height: 45px;
      margin: 0 auto;
    }

    .time-item strong {
      background: orange;
      color: #fff;
      line-height: 49px;
      font-size: 36px;
      font-family: Arial;
      padding: 0 10px;
      margin-right: 10px;
      border-radius: 5px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }

    .time-item>span {
      float: left;
      line-height: 49px;
      color: orange;
      font-size: 32px;
      margin: 0 10px;
      font-family: Arial, Helvetica, sans-serif;
    }

    .title {
      width: 260px;
      height: 50px;
      margin: 200px auto 50px auto;
    }
  </style>

这是简单的CSS代码，我就不多说了，有什么不懂的可以留言，我为你解答。

四.js部分

1.方法一

 <script>
 //获取DOM标签
    var day = document.getElementById('day');
    var hour = document.getElementById('hour');
    var minute = document.getElementById('minute');
    var second = document.getElementById('second');
    //计时器setInterval 
    setInterval(function () {
      //new Date()获取本地时间
      var today = new Date();
      //添加结束时间
      var stopTime = new Date("2020/12/12 00:00:00");
      //获取时间戳（毫秒）
      var zhuanyu = stopTime.getTime() - today.getTime();
      // 方法一
      //转换为天数
      zhuanD = parseInt(zhuanu / (60 * 60 * 24 * 1000));
      //减去天所用的毫秒数
      D = parseInt(zhuanu) - parseInt(zhuanD * 60 * 60 * 24 * 1000);
      //天所用剩余的毫秒数转换成小时
      zhuanH = parseInt(D / (60 * 60 * 1000));
      //减去天、小时所用的毫秒数
      H = D - zhuanH * 60 * 60 * 1000;
      //天、小时所用剩余的毫秒数转换成分钟
      zhuanM = parseInt(H / (60 * 1000));
       //减去天、小时、分钟所用的毫秒数
      M = H - zhuanM * 60 * 1000;
       //天、小时、分钟所用剩余的毫秒数转换成秒
      zhuanS=parseInt(M/(1000))
      //给html中的天赋值
      day.innerHTML = zhuanD;
      hour.innerHTML = zhuanH;
      minute.innerHTML = zhuanM;
      second.innerHTML = zhuanS;
      //计时器setInterval 每1000毫秒调用一次函数function
    }, 1000)

  </script>

2.方法二

 <script>
 //获取DOM标签
    var day = document.getElementById('day');
    var hour = document.getElementById('hour');
    var minute = document.getElementById('minute');
    var second = document.getElementById('second');
    //计时器setInterval 
    setInterval(function () {
      //new Date()获取本地时间
      var today = new Date();
      //添加结束时间
      var stopTime = new Date("2020/12/12 00:00:00");
      //获取时间戳（毫秒）
      var shenyu = stopTime.getTime() - today.getTime();  
      //方法二
      console.log(shenyu);
      //转化为秒
      var zhuanHS = shenyu / 1000;
      shengyuD = parseInt(zhuanHS / (60 * 60 * 24));//转换为天 
      //计算天的余数为小时
      shengyuH = parseInt(zhuanHS / (60 * 60) % 24);
      //计算小时的余数为分钟
      shengyuM = parseInt(zhuanHS / (60) % 60);
      //计算分钟的余数秒
      shengyuS = parseInt(zhuanHS % 60)
      day.innerHTML = shengyuD;
      hour.innerHTML = shengyuH;
      minute.innerHTML = shengyuM;
      second.innerHTML = shengyuS;
    }, 1000)

  </script>