更改图像onClick一段时间

问题描述：

目标：首先，我想显示幸福的脸部图像。当用户点击欢乐脸部图像时，我想将其改为悲伤的脸部图像1秒钟。 1秒后，我想把它改回到开心的脸上，直到用户点击3次幸福的脸。在第三次点击中，我想将其更改为显示1秒的不同图像，然后整个图像消失。

我该怎么做？

var counter = 0; 
 
function myTimer() { 
 
    counter++; 
 
    document.getElementById("face").src = "http://i0.kym-cdn.com/photos/images/newsfeed/000/295/544/a63.png"; 
 
    
 
    if (counter === 3) {//Image should be hidden in 1 secound 
 
    document.getElementById("face").src = "https://i.pinimg.com/originals/e0/9b/0b/e09b0b3e287e7ed9c5b2a802e4e31f92.png "; 
 
    document.getElementById('face').visable = 'hidden' 
 
    } 
 
}

<img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/718smiley.png" id="face" onclick="setTimeout(myTimer, 1000);" style="width:100px;height:100px;"/>

答

你可以使用setTimeout()，做一个功能重设图片src，并且使用超时1秒后调用此函数。也可以隐藏的元件使用.style.visibility = "hidden"

var counter = 0; 
 
function resetImage(){ 
 
    document.getElementById("face").src = "https://upload.wikimedia.org/wikipedia/commons/f/fa/718smiley.png"; 
 
    if(counter ===3) 
 
     document.getElementById('face').style.visibility = "hidden"; 
 
} 
 

 
function myTimer() { 
 
counter++;  
 
    if (counter === 3) 
 
    {//Image should be hidden in 1 secound 
 
\t document.getElementById("face").src = "https://i.pinimg.com/originals/e0/9b/0b/e09b0b3e287e7ed9c5b2a802e4e31f92.png "; 
 
    }else{ 
 
    document.getElementById("face").src = "http://i0.kym-cdn.com/photos/images/newsfeed/000/295/544/a63.png"; 
 
    } 
 
    setTimeout(function(){ 
 
    resetImage(); 
 
    }, 1000) 
 
    
 
}

<img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/718smiley.png" id="face" onclick="setTimeout(myTimer, 1000);" style="width:100px;height:100px;"/>

更改图像onClick一段时间

相关推荐