Question

我有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'
  }
}

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

Answer 1

您可以使用setTimeout()，创建一个重置图像src的函数，并在1s后使用超时来调用此函数。同样要隐藏元素，请使用.style.visibility = "hidden"

＆＃13;

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)
 
}

＆＃13;

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

＆＃13;

更改图像onClick一段时间

1 个答案: