javascript countdown timer remove hours minutes seconds .. after expiration

0
votes

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

2
javascripthtmlcsstimercountdown
Hi there and welcome to Stack Overflow! Unfortunately, it's really not clear what you are asking. Have a look at How to Ask and put together a Minimal, Complete, and Verifiable Example for a much better change of finding the help you need. As a secondary note, anybody looking to help you is going to have a very difficult time slogging through your variable names. Use more descriptive variable names! - Fissure King
thank you Fissure King, but the problem is that I am beginner in Javascript and I got code snippet from GrapeJS countdown timer when I was building small widget. That is why i decided to post it here hoping that i will get a help. - Asyl
If you want it to avoid saying EXPIRED, just replace EXPIRED with '' - Jack
No I do not want to avoid Expired. I just do not want to see zeros. for example if i pass today i will see 00 days, some hours, some minutes and seconds. so I want it not to show me days, just show left hours etc. - Asyl

2 Answers

0
votes

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";
}
0
votes

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>