在一段时间内更改图像 onClick答案

【问题标题】：Change image onClick for a set amount of time在一段时间内更改图像 onClick
【发布时间】：2017-09-22 23:09:14
【问题描述】：

我有 3 张图像可以在它们之间切换。

目标：首先我想展示一张快乐的脸。当用户单击快乐的脸图像时，我想将其更改为悲伤的脸图像 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'
  }
}

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

【问题讨论】：

标签： javascript html css

【解决方案1】：

你可以使用setTimeout()，做一个函数来重置图片src，并在1s后使用超时调用这个函数。还要隐藏元素使用.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
	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)
 
}

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

【讨论】：