倒计时结束后可以自动更换图片来源吗?
Can I automatically change image source after countdown expires?
是否可以在 countdown/timer 达到零后自动更改图像的来源?假设我有 2 个图像源 - A 和 B,以及一个计时器。当计时器到期时,如何将图像源从 A 更改为 B?
<img class="image" src="A">
<div class="timer"></div>
计时器到期:
<img class="image" src="B">
<div class="timer">Expired</div>
您可以使用 JavaSript 的 .src
更改 src。
这是一个例子:
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>
是否可以在 countdown/timer 达到零后自动更改图像的来源?假设我有 2 个图像源 - A 和 B,以及一个计时器。当计时器到期时,如何将图像源从 A 更改为 B?
<img class="image" src="A">
<div class="timer"></div>
计时器到期:
<img class="image" src="B">
<div class="timer">Expired</div>
您可以使用 JavaSript 的 .src
更改 src。
这是一个例子:
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>