js实现倒计时效果

作者: 于默k | 来源:发表于2019-06-21 15:13 被阅读0次

小程序拼团列表倒计时
小程序实现简单的倒计时秒杀效果
原生JS实现Tab切换效果和模态框效果
小程序倒计时功能实现
jQuery基础知识
简单的实现页面倒计时js
札记丶20171016
倒计时、动态表格、微博
JS实现简单的倒计时功能，适合初学者（附源码）！
js实现倒计时效果

<!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>Document</title>
</head>
<style>

      margin: 0;
      padding: 0;
  }

  p {
      font-size: 80px;
      text-align: center;
  }

  p span {
      color: red;
  }

  p span.time {
      color: black
  }

  body {
      padding-top: 200px;
  }

</style>

<body>

    <p>距离2011年还有</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/1/1 00:00:00');
        var newTime = newDate.getTime();//2019年距离2011年的毫秒数
        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>