Witam,
mam funkcję, która pokazuje ilość pozostałego czasu odliczając go wstecz.
W jaki sposób zrobić, aby przy zakończonym odliczaniu zmienił się kolor czcionki?
<span style="font-family: Digital-7 Mono; font-size: large; color: green;"><strong id="<? echo $counter1; ?>">
</strong></span>
function countdown(targetDate, displayElement, onCountdownFinish /* = null*/) {
if (!(targetDate && displayElement)) {
return;
}
var formatTimeInterval = function(seconds) {
var hrs = Math.floor(seconds / 3600)
var min = Math.floor(seconds / 60) % 60;
var sec = seconds % 60;
return (hrs + ':' + min + ':' + sec).replace(/(^|:)(\d)(?=:|$)/g, '$10$2');
};
var refreshTimer = function() {
var now = new Date();
var diffMilliseconds = targetDate.getTime() - now.getTime();
var diffSeconds = Math.round(diffMilliseconds / 1000);
if (diffSeconds < 0) {
diffSeconds = 0;
}
var countdownHTML = formatTimeInterval(diffSeconds)
if (countdownHTML != displayElement.innerHTML) {
displayElement.innerHTML = countdownHTML;
}
if (diffSeconds === 0) {
clearInterval(intervalId);
if (typeof onCountdownFinish === 'function') {
onCountdownFinish(targetDate);
}
}
};
var intervalId = setInterval(refreshTimer, 250);
refreshTimer();
}
(function() {
var now = new Date();
countdown(new Date(<? echo $Aktual; ?> + <? echo $czas; ?> * 1000), document.getElementById(<? echo $counter1; ?>));
})();
po dodaniu
<span [b]id="<? echo $counter2; ?>"[/b] style="font-family: Digital-7 Mono; font-size: x-large; color: green;">
<strong id="<? echo $counter1; ?>">
</strong></span> .....
var refreshTimer = function() {
var now = new Date();
var diffMilliseconds = targetDate.getTime() - now.getTime();
var diffSeconds = Math.round(diffMilliseconds / 1000);
if (diffSeconds < 0) {
diffSeconds = 0;
[b]const divElement = document.getElementById("<? echo $counter2; ?>");
divElement.style.color = "red";[/b]
}
......
gdzie $counter2 jest identyfikatorem rekordu, owszem kolor zmienia się na czerwony, ale dopiero po odświeżeniu strony, idealnie by było jak zegar dochodzi do 00:00:00 i automatycznie zmienia się na czerwony.
Poproszę o podpowiedzi, dziękuję!