【js】根据网址参数时间戳来进行的倒计时，原生js-CSDN博客

1.思路：

通过当前页面地址含有的参数获取目标时间戳（过去的时间）----getQueryString
时间戳一般是精确到秒，js的生成是通过Date.parse(datestring)。 datestring是一个表示日期和时间的字符串，格式根据浏览器不同有所不同，查看可以通过new Date()获取一个当前时间的字符串。这里以chrome举例："Thu Nov 29 2018 09:41:45 GMT+0800 (中国标准时间)"。而Date.parse是Date对象的静态方法，会返回一个 1970/1/1午夜距离该日期时间的毫秒数的number。例如 1543455927000 。不过需要注意的是，因为new Date()精确到秒，所以Date.parse(new Date())的最后三位永远是0。
所以倒计时的具体思路就为：通过Date.parse(new Date())生成当前时间的时间戳，再与页面地址中含有的参数时间戳相减（注意精确度）得到X，然后通过“ X % 60 是秒，X % ( 60 * 60)是分钟，X / ( 60 * 60 )是小时”来计算目标时间到现在的时间。

2.具体实现：

html部分代码：

<div class="timer">
            // 小时
            <div class="hour">
                <div class="hour-ten">
                    <img src="img/blockYellow.png" alt="" class="yellow-block">
                    <span>1</span>
                </div>
                <div class="hour-one">
                    <img src="img/blockYellow.png" alt="" class="yellow-block">
                    <span>1</span>
                </div>
            </div>
            <img src="img/colYellow.png" alt="" class="yellow-colon">
            // 分钟
            <div class="minute">
                <div class="minute-ten">
                    <img src="img/blockYellow.png" alt="" class="yellow-block">
                    <span>5</span>
                </div>
                <div class="minute-one">
                    <img src="img/blockYellow.png" alt="" class="yellow-block">
                    <span>9</span>
                </div>
            </div>
            <img src="img/colYellow.png" alt="" class="yellow-colon">
            // 秒钟
            <div class="second">
                <div class="second-ten">
                    <img src="img/blockYellow.png" alt="" class="yellow-block">
                    <span>5</span>
                </div>
                <div class="second-one">
                    <img src="img/blockYellow.png" alt="" class="yellow-block">
                    <span>9</span>
                </div>
            </div>
        </div>
复制代码

css代码

        // 包在上面的最外层的
        .has-time {
            position: relative;
            height: 100%;
        }

        .yellow-block {
            border-radius: .02rem;
            width: .64rem;
            height: .88rem;
        }

        .timer {
            position: absolute;
            top: 7.02rem;
            left: 15.7%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: .72rem;
            color: #894901;
        }

        .hour-ten, .hour-one, .minute-ten, .minute-one, .second-ten, .second-one {
            position: relative;
            margin-left: .08rem;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .hour-ten span, .hour-one span, .minute-ten span, .minute-one span, .second-ten span, .second-one span {
            position: absolute;
            top: 0;
        }

        .yellow-colon {
            margin: auto .12rem;
            width: .12rem;
            height: .4rem;
            display: inline-block;
        }
复制代码

这部分的直观展示长这样：

以下为js代码

        /*
        * 获取 名字为传入参数的属性 的属性值
        * name是想要获取的属性值的属性名
        */
        function getQueryString(name) {
                var match = undefined;
                var href = window.location.href;
                var index = href.indexOf("?");
                if (index > -1 && href.match(new RegExp(name, "i"))) {
                    var queryStr = href.slice(index + 1).replace(/#([^?]+)/g, "");
                    var matches = queryStr.match(new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"));
                    match = matches && matches[2] ? decodeURIComponent(matches[2]) : undefined;
                }
                return match;
            }

        // 获取参数名为time的时间戳的值，这里假定为1543390848
        var time = getQueryString("time");

复制代码

注意这里假定的值的位数，可见是精确到秒而不是毫秒的。

    /**
     * 获取初始数据
     */
    function getData() {
        var oldStamp = parseInt("1543390848");
        var totalSecond = Date.parse(new Date()) / 1000 - oldStamp;
        var hourPast = Math.floor(totalSecond / 60 / 60);
        var minutePast = Math.floor((totalSecond / 60) % 60);
        var secondPast = Math.floor(totalSecond % 60);
        var hour = hourPast < 12 ? (11 - hourPast).toString() : "0";
        var minute = minutePast < 60 ? (59 - minutePast).toString() : "0";
        var second = hourPast < 60 ? (59 - secondPast).toString() : "0";
        toInit("hour",hour);
        toInit("minute",minute);
        toInit("second",second);
        if (hour == minute && minute == second && second == "0") {
            document.querySelector(".timer").style.display = "none";
        }
    }

    function toInit(type,value) {
        if (value.length == 1) {
            document.querySelector("."+type+"-ten span").innerText = "0";
            document.querySelector("."+type+"-one span").innerText = value[0];
        } else {
            document.querySelector("."+type+"-ten span").innerText = value[0];
            document.querySelector("."+type+"-one span").innerText = value[1];
        }
    }
复制代码