不要着急，不要着急，

休息，休息一会。

抢购倒计时的实现

实例代码

<html>

<head>
    <meta charset="utf-8">
    <style>
        .timebox {
            border: 1px pink solid;
            width: 300px;
            height: 50px;
            text-align: center;
            margin: 0 auto;
            font-size: 20px;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div class="timebox">
        距离抢购时间还剩：
        <span>-- ：-- ：--</span>
    </div>
</body>
<script>
    let timebox = document.querySelector(".timebox"),
        timespan = document.querySelector("span");

    function addZero(val) {
        return val < 10 ? '0' + val : val;
    }
    /*
        computeTime:接收服务器字符串打印离抢购的时间
        @params:[String timeStr]服务器返回的时间字符串
        @return：
    */
    let computeTime = function (timeStr) {
        if (typeof timeStr === "undefined") {
            //此处不能用let声明变量，不然外部无法访问；
            var nowTime = new Date(); //当前客户端时间，后期需要换成服务端时间
        } else {
            //字符串的处理，需要的同学可以参考下我的随笔
            console.log(1);
        }
        let endTime = new Date('2019/8/16 18:00:00'),
            diffTime = endTime - nowTime;
        if (diffTime >= 0) {
            let hours = Math.floor(diffTime / (1000 * 60 * 60));
            diffTime = diffTime - hours * 3600000;
            let minute = Math.floor(diffTime / (1000 * 60));
            diffTime = diffTime - minute * 60000;
            let second = Math.floor(diffTime / 1000);
            timespan.innerHTML = `${addZero(hours)}:${addZero(minute)}:${addZero(second)}`;
            return;
        }
        timespan.innerHTML = '抢购开始';
    };
    setInterval(computeTime,1000);
</script>

</html>

基于服务器获取时间的思路：

  • 1.第一次通过AJAX请求获取请求头的时间信息(xhr.readyState===2,而不用等整个请求的完成)，并用一个全局变量保存起来。

  • 2.接下来不再次向服务器发送请求，每次执行computeTime函数，通过判断是否是服务器返回的时间如果是，手动的进行时间的增加。

posted @ 2019-08-15 17:30  angle-xiu  阅读(368)  评论(0)  编辑  收藏  举报
Live2D