Kann ich die Bildquelle nach Ablauf des Countdowns automatisch ändern?

Question

Ist es möglich, die Quelle eines Bildes automatisch zu ändern, nachdem ein Countdown/Timer Null erreicht hat? Nehmen wir an, ich habe 2 Bildquellen - A und B und einen Timer. Wie kann ich die Bildquelle von A zu B ändern, wenn der Timer abgelaufen ist?

<img class="image" src="A"> 
<div class="timer"></div> 

Timer abgelaufen ist:

<img class="image" src="B"> 
<div class="timer">Expired</div> 

Answer 1

Sie das src .src mit JavaSript des ändern.

Hier ist ein Beispiel:

var changeSrc = function() { 
 
    document.getElementById("image").src="http://via.placeholder.com/150x150"; 
 
} 
 

 
var count=10; 
 
var counter=setInterval(timer, 1000); 
 

 
function timer() { 
 
    count=count-1; 
 
    if (count <= 0) { 
 
    clearInterval(counter); 
 
    changeSrc(); 
 
    } 
 
    document.getElementById("timer").innerHTML = count; 
 
}

<img id="image" src="http://via.placeholder.com/350x150"> 
 
<br> 
 
<div>Timer: <span id="timer">10</span></div>