更改圖像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;"/>

來源

2017-09-22 taji01

你可以使用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;"/>

來源

2017-09-22 23:14:14 Dij

更改圖像onClick一段時間

回答

相關問題