Forum PHP.pl

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?

[HTML] pobierz, plaintext 
<span style="font-family: Digital-7 Mono; font-size: large; color: green;"><strong id="<? echo $counter1; ?>"></strong></span>
 
<script>
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; ?>));
})();
 
 
 
</script>
[HTML] pobierz, plaintext 

po dodaniu

[HTML] pobierz, plaintext 
 
<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]
 
      }
......
[HTML] pobierz, plaintext 

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ę!

Przecież od tego masz parametr onCountdownFinish.
Wywołując funkcję countdown powinieneś przekazać jako trzeci parametr funkcję (nazwę zdefiniowanej funkcji), która robi to czego oczekujesz.

Powinieneś również parametry dla new Date oraz getElementById przekazywać jako stringi, obecnie nie ma tam w ogóle znaczników ograniczających (' ").