Aktualisieren ein Intervallvariable auf dem Bildschirm in dem HTML-

Question

Im Kopfteil:

var countdownTimer; <br/> 
countdownTimer = 45; <br/> 

function makeCountdown() { <br/> 
    countdownTimer = countdownTimer - 1; <br/> 

} 

setInterval(makeCountdown, 1000); 
<br/><br/> 

Im Körper-Bereich der Seite:

document.write(countdownTimer);<br/> 

function updateCountdown() { <br/> 
    document.replace(countdownTimer); <br/> 

} 
<br/><br/> 
setInterval(updateCountdown, 1000); 


<br/><br/> 

Ich habe im Browser geprüft Die Konsole und die countdownTimer-Variable gehen jede Sekunde herunter, aber wo ich Probleme habe, ist, wie man die Variable auf der Seite in Echtzeit aktualisiert.

Ich hatte einen langen Blick und ich kann nichts hier oder anderswo online finden, das mir helfen kann, ich bin auch ziemlich neu in Javascript. Vielen Dank für jede Hilfe!

Answer 1

Etwas neben Antwort des Rayon. Countdown zu stoppen, wenn der Timer 0 erreichen

var timer=45; 
 
    var intervalId; 
 
    function countdown(){ \t 
 
     $('#elem').text(timer); 
 
     if(timer==0){ 
 
      clearInterval(intervalId); 
 
     } 
 
     timer--; 
 
    } 
 
    intervalId=setInterval(countdown,1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<span id="elem"></span>

Answer 2

• Änderungen an dem Element anstatt document selbst
• Es gibt keine replace Methode für document
• Es gibt keine Punkt 2 Intervallen ist, wenn Dauer identisch ist

Hinweis: Stellen Sie sicher, dass Sie Platz script als letztes Kind von body oder sonst, DOM api wird versuchen, das Element zu durchlaufen, bevor DOM bereit ist, das null Ergebnis für 01 zurückgibt

var countdownTimer; 
 
var elem = document.getElementById('elem'); 
 
countdownTimer = 45; 
 

 
function makeCountdown() { 
 
    countdownTimer = countdownTimer - 1; 
 
    elem.textContent = countdownTimer; 
 
} 
 
setInterval(makeCountdown, 1000); 
 
elem.textContent = countdownTimer;

<span id='elem'><span>