Я запрограммировал этот обратный отсчет js/jquery. Как я могу сделать, когда разница во времени равна 0, что мой таймер замерзает в 00:00 и остается таким же в течение 1: 30 мин и меняется на красный шрифт? Пример: время Remainig 00:05, после 5 секунд 00:00 (красный шрифт), и он остается таким же в течение 1:30.
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();
});
Это html:
<div id="Box1">
<h1 style="font-family:Helvetica;color:#FFFFFF;font-size:5px;"> </h1>
<div id="minute1Box"></div>
<div id="sekunde1Box"></div>
</div>
Прежде всего, вам не нужно очищать свой таймер вообще, потому что вы используете setTimeout
, который является таймером с огнем.
Вы должны не вызывать setTimeout
, когда обратный отсчет либо сделано, или разница во времени попадает порог в 1500 секунд. Я бы сделал так:
if (timeDiff1 <= 0) {
$("#Box1").remove();
return;
}
if (timeDiff1 > 1500000) {
$("#Box1").remove();
return;
}
Во-вторых, чтобы ответить на ваш исходный вопрос, когда время Box1
нуля, просто установите класс css вашего Box1
в некоторый класс CSS, который имеет красный шрифт, а также установите для текста ваших элементов div
нули. Затем установите новый тайм-аут для функции, которая удаляет ваш Box1
через 90 секунд.
И, кстати, рассмотрим использование text()
вместо html()
когда вы устанавливаете текстовое содержимое элемента, а не содержимое html.
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;
}
В вашем файле CSS:
.timer-warning {
color: #f00;
}