繁体   English   中英

javascript倒数计时器到期后删除小时,分钟,秒..

[英]javascript countdown timer remove hours minutes seconds .. after expiration

我对javascript很陌生,不知道如何删除倒计时的过期部分。 例如,当倒数计时结束时,它将删除天数,然后将删除小时数,依此类推,直到达到“过期”为止

这是JS代码:

var items = document.querySelectorAll('#clock');
for (var i = 0, len = items.length; i < len; i++) {
    (function () {
        var e = new Date("2018-12-31").getTime(),
            t = this.querySelector("[data-js=countdown]"),
            n = this.querySelector("[data-js=countdown-endtext]"),
            day = this.querySelector("[data-js=countdown-day]"),
            hour = this.querySelector("[data-js=countdown-hour]"),
            min = this.querySelector("[data-js=countdown-minute]"),
            sec = this.querySelector("[data-js=countdown-second]"),
            s = this.gjs_countdown_interval;
        s && s && clearInterval(s);
        var l = function (e, t, n, s) {
                day.innerHTML = e < 10 ? "0" + e : e,
                    hour.innerHTML = t < 10 ? "0" + t : t,
                    min.innerHTML = n < 10 ? "0" + n : n,
                    sec.innerHTML = s < 10 ? "0" + s : s
            },
            u = function () {
                var day = (new Date).getTime(),
                    hour = e - day,
                    min = Math.floor(hour / 864e5),
                    sec = Math.floor(hour % 864e5 / 36e5),
                    s = Math.floor(hour % 36e4 / 6e4),
                    u = Math.floor(hour % 6e4 / 1e3);
                l(min, sec, s, u), hour < 0 && (clearInterval(c),
                    n.innerHTML = "EXPIRED",
                    t.style.display = "none",
                    n.style.display = "")
            };
        if (e) {
            var c = setInterval(u, 1e3);
            this.gjs_countdown_interval = c,
                n.style.display = "none",
                t.style.display = "", u()
        } else l(0, 0, 0, 0)
    }.bind(items[i]))();
}

HTML:

<section class="flex-sect">
    <div id="clock" class="countdown">
        <span data-js="countdown" class="countdown-cont">
        <div class="countdown-block">
            <div data-js="countdown-day" class="countdown-digit"></div>
            <div class="countdown-label">days</div>
        </div>
        <div class="countdown-block">
            <div data-js="countdown-hour" class="countdown-digit"></div>
            <div class="countdown-label">hours</div>
        </div>
        <div class="countdown-block">
            <div data-js="countdown-minute" class="countdown-digit"></div>
            <div class="countdown-label">minutes</div>
        </div>
        <div class="countdown-block">
            <div data-js="countdown-second" class="countdown-digit"></div>
            <div class="countdown-label">seconds</div>
        </div>
        </span>
        <span data-js="countdown-endtext" class="countdown-endtext"></span>
    </div>
</section>

非常感谢您的帮助

您可以检查时间段= 0,并且所有较大的时间段也都为0。

if (day == 0) {
    day.innerHTML = "";
}
if (day == 0 && hour == 0) {
    hour.innerHTML = "";
}
if (day == 0 && hour == 0 && min == 0) {
    min.innerHTML = "";
}
if (day == 0 && hour == 0 && min == 0 && sec == 0) {
    sec.innerHTML = "";
    n.innerHTML = "Expired";
}

最终,我能够解决我的错误,这就是我的解决方法:GMT-7代替了{{request.GET.date}}给出了参数,效果很好!

 <script> var deadline = new Date("{{ request.GET.date }} GMT-7").getTime(); var x = setInterval(function () { var now = new Date().getTime(); var t = deadline - now; var days = Math.floor(t / (1000 * 60 * 60 * 24)); var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((t % (1000 * 60)) / 1000); if (days == 0) { document.getElementById("day").innerHTML = ''; document.getElementById("day-title").innerHTML = ''; } else if (days ==1) { document.getElementById("day-title").innerHTML = 'Day'; document.getElementById("day").innerHTML = days; } else { document.getElementById("day").innerHTML = days; document.getElementById("day-title").innerHTML = 'Days'; } if (hours != 0) { document.getElementById("hour").innerHTML = hours; } else { document.getElementById("hour").innerHTML = ''; document.getElementById("hour-title").innerHTML = ''; } document.getElementById("minute").innerHTML = minutes; document.getElementById("second").innerHTML = seconds; if (t < 0) { clearInterval(x); document.getElementById("clock").innerHTML = ''; } }, 1000); </script> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM