倒计时

最新推荐文章于 2024-06-12 14:02:38 发布

weixin_34413103

最新推荐文章于 2024-06-12 14:02:38 发布

阅读量70

点赞数

原文链接：https://juejin.im/post/5a3341f76fb9a0450809b3ea

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <style>
        #box{
            margin-top: 100px;
        }
        span{
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script src="coutDown.js"></script>
</body>
</html>
复制代码

coutDown.js

~function () {
    let severTime = countTime = null;
//获取服务器器时间获取请求头信息
    let getTime = () => {
        let xhr = new XMLHttpRequest();
        //利用异步，方法head (temp.xml 随便在服务器的一个文件)
        xhr.open('head', 'temp.xml');
        xhr.onreadystatechange = () => {
            //  验证http状态码一23开头的成功状态不是成功直接不执行
            if (/[23]\d{2}/g.test(xhr.status)) return;
            //ajax状态码为2只要能接受到响应头就可以了，获取响应头时间
            if (xhr.readyState === 2) {
                //获取服务器响应头时间
                severTime = new Date(xhr.getResponseHeader('date')).getTime();
                countDown();
            }
        };
        xhr.send();
    };
    getTime();
    //计算倒计时
    let countDown = () => {
        //时间差
        severTime += 1000;
        //    补零函数
        let bl = n => {
            return n < 10 ? '0' + n : n;
        };
        // 设定目标时间(格林时间转换东八区时间)
        // let targetTime = new Date('2018/1/29 00:00').getTime();
        let targetTime = new Date('2018/02/16 12:00').getTime();
        //    剩余时间
        let surPlus = targetTime - severTime;
        // 计算天
        let day = Math.floor(surPlus / (1000 * 60 * 60 * 24));
        surPlus -= day * (1000 * 60 * 60 * 24);
        //    计算时分秒
        let hours = Math.floor(surPlus / 3600000);
        surPlus -= hours * 3600000;
        let minus = Math.floor(surPlus / 60000);
        surPlus -= minus * 60000;
        let second = Math.ceil(surPlus / 1000);
        if (surPlus < 0) {
            box.innerHTML = `倒计时结束`;
            clearInterval(countTime)
            return;
        }
        console.log(bl(hours));
        box.innerHTML = `距离新年还剩<span>${day}天</><span>${bl(hours)}:</span><span>${bl(minus)}:</span><span>${bl(second)}</span>`

    };
    countTime = setInterval(countDown, 1000);

}();
复制代码