Javascript/jquery countdown freeze at 00:00

Question

I programmed this js/jquery countdown. How can I make when time difference is 0 that my timer freezes at 00:00 and stay like that for 1:30min and changes to red font? Example: Remainig time 00:05, after 5s it's 00:00(red font) and it stays like that for 1:30 minute.

var timer1;
function cdtd1() {
    var sad1 = new Date();
    var dolazak1 = new Date(sad1.getFullYear(),sad1.getMonth(),sad1.getDate(),13,01,00);
    var timeDiff1 = dolazak1.getTime() - sad1.getTime();
    if (timeDiff1 <= 0) {
        clearInterval(timer1);
        $("#Box1").remove();
    }
    if (timeDiff1 > 1500000) {
        clearInterval(timer1);
        $("#Box1").remove();
    }


    var sekunde1 = Math.floor(timeDiff1 / 1000);
    var minute1 = Math.floor(sekunde1 / 60);
    var sati1 = Math.floor(minute1 / 60);
    var dani1 = Math.floor(sati1 / 24);
    sati1 %= 24;
    minute1 %= 60;
    sekunde1 %= 60;

    $("#dani1Box").html(dani1);
    $("#sati1Box").html(sati1 + ':');
    $("#minute1Box").html('7-Dubrava '+ minute1 + ':');
    $("#sekunde1Box").html(sekunde1);

    timer1 = setTimeout(cdtd1, 1000);
}

$(document).ready(function() {
     cdtd1();
});

This is html:

<div id="Box1">

<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;">&nbsp;</h1>

<div id="minute1Box"></div>

<div id="sekunde1Box"></div>

</div>

Answer 1

First of all, you don't need to clear your timer at all, because you are using setTimeout, which is a fire-once timer.

You need to not call setTimeout when the countdown is either done, or the time difference hits your threshold of 1,500 seconds. I would do like this:

if (timeDiff1 <= 0) {
    $("#Box1").remove();
    return;
}
if (timeDiff1 > 1500000) {
    $("#Box1").remove();
    return;
}

Second, to answer your original question, when the time has hit zero, simply set the css class of your Box1 to some CSS class that has a red font, and also set the text of your div elements to zeros. Then set a new timeout for a function that removes your Box1 after 90 seconds.

And by the way, consider using text() instead of html() when you are setting the text contents of an element and not the html contents.

if (timeDiff1 <= 0) {
    $("#Box1").addClass("timer-warning");

    $("#dani1Box").text("0");
    $("#sati1Box").text("0:");
    $("#minute1Box").text('7-Dubrava 0:');
    $("#sekunde1Box").text("0");

    setTimeout(function() {
        $("#Box1").remove();
    }, 90000);
    return;
}

In your CSS file:

.timer-warning {
    color: #f00;
}