javascript - 时间和点击触发图像变化

Question

我想要一张5秒后没有被点击的图片变成另一张图片，点击后又恢复到原来的图片。

所以

图像>(5秒后用户未单击图像)>提示用户单击的图像>(用户单击)>图像恢复到原始状态。

有什么想法吗？

Answer 1

当然，这不是问题。您可以使用以下代码来完成:

HTML

<img id="clickable" src="http://fullahead.org/gallery/toronto-2010/image/thumb/DSC_3356.jpg" style="cursor: pointer" title="Clicky!"/>

Javascript

// Get a reference to the image and save its original source
var img = document.getElementById('clickable');
var origSrc = img.src;

// Create the timeout to change the source (2 seconds in code below)
var timeout = setTimeout(function(){
    img.src = 'http://fullahead.org/gallery/ilse-de-grand-calumet-2010/image/thumb/DSC_3163.jpg';   
}, 2000);

// Register the click event handler for the image and clear the timeout
img.onclick = function(){
    clearTimeout(timeout);
    this.src = origSrc;    
}

可以看到in action here .