javascript 实现倒计时功能

最新推荐文章于 2023-05-31 18:30:08 发布

朝歌1122

最新推荐文章于 2023-05-31 18:30:08 发布

阅读量349

点赞数

分类专栏： js html css

本文链接：https://blog.csdn.net/qq_40452317/article/details/89423819

版权

js 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

效果图如下：

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>倒计时</title>
  <style>
    *{
      margin: 0;
      padding:0;
    }
    p {
      font-size: 50px;
      text-align: center;
    }
    p span {
      color: red;
    }
    p span.time {
      color: black
    }
    body{padding-top:200px;}
  </style>
</head>
<body>
<p>距离**生日年还有</p>
<p><span></span></p>
<script>
    var oSpan = document.getElementsByTagName('span')[0];
    function tow(n) {
        return n >= 0 && n < 10 ? '0' + n : '' + n;
    }
    function getDate() {
        var oDate = new Date();//获取日期对象
        var oldTime = oDate.getTime();//现在距离1970年的毫秒数
        var newDate = new Date('2019/11/11 00:00:00');
        var newTime = newDate.getTime();//2019年距离1970年的毫秒数
        var second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数
        var day = Math.floor(second / 86400);//整数部分代表的是天；一天有24*60*60=86400秒 ；
        second = second % 86400;//余数代表剩下的秒数；
        var hour = Math.floor(second / 3600);//整数部分代表小时；
        second %= 3600; //余数代表 剩下的秒数；
        var minute = Math.floor(second / 60);
        second %= 60;
        var str = tow(day) + '<span class="time">天</span>'
            + tow(hour) + '<span class="time">小时</span>'
            + tow(minute) + '<span class="time">分钟</span>'
            + tow(second) + '<span class="time">秒</span>';
        oSpan.innerHTML = str;
    }
    getDate();
    setInterval(getDate, 1000);
</script>
</body>
</html>