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