知识点

  1. 直接在 new Date(’····’)中加入时间可以自定义时间
  2. Date()内置对象函数的灵活运用
  3. parseInt()函数可解析一个字符串，并返回一个整数
  4. number < 10 ? ‘0’ + number : number ;
  5. 时间转换

运行效果

Javascript特效：距离某个时间倒计时_html

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #time{font-size: 40px;color:red;text-align: center;padding: 100px;}
    </style>
</head>
<body>
<div id="time"></div>
<script>
    window.onload = function (ev) {
        var nowDate, nowTimes, lastTimes, lastSeconds, lastD, lastH, lastM, lastS;
        var time = document.getElementsByTagName('div')[0];
        // 1. 定义将来时间
        var preDate = new Date('2020/05/01 00:00:00');
        var preTimes = preDate.getTime();   // 获取目标日期距离1970年1月1日毫秒数
        // 2. 开启定时器
        setInterval(function () {
            // 3. 获取当前时间
            nowDate = new Date();
            // 4. 获取距离1970年1月1日毫秒数
            nowTimes = nowDate.getTime();
            // 5. 获取剩余毫秒数
            lastTimes = preTimes - nowTimes;
            // 6. 毫秒转换
            // ① 毫秒转换为秒
            lastSeconds = parseInt(lastTimes / 1000);
            // ② 通过秒转天、时、分、秒
            lastD = size(parseInt(lastSeconds / 3600 / 24));
            lastH = size(parseInt(lastSeconds / 3600 % 24));
            lastM = size(parseInt(lastSeconds / 60 % 60));
            lastS = size(parseInt(lastSeconds % 60));
            // 7. 将结果放入div
            time.innerHTML = '距离五一放假还剩：' + lastD +'天' + lastH + '小时' + lastM + '分钟' + lastS + '秒！';
        }, 1000);

        function size(number){
            return number < 10 ? '0' + number : number ;
        }
    }

</script>
</body>
</html>