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

Question

I am very new to javascript and I do not know how to remove the expired part of my countdown. For example when the countdown finishes counting on days, it will remove days, then it will remove hours and etc until it reaches the point "Expired"

Here is the JS code:

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>

Thank you so much for your help guys

Answer 1

You could check if a time period = 0 and all the larger time periods are also 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";
}

Answer 2

Finally I was able to fix my errors and this is how I did it: instead of {{ request.GET.date }} GMT-7 give your parameters and it works great!

 <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>