在一定时间内通过单击更改图像 [英] Change image onClick for a set amount of time

问题描述

我有 3 张图片可以切换.

I have 3 images that I switch between.

目标:首先，我想展示笑脸图像.当用户点击快乐的人脸图像时，我想将其更改为悲伤的人脸图像 1 秒钟.1 秒后我想把它改回笑脸，直到用户点击笑脸 3 次.在第三次点击中，我想将其更改为显示 1 秒的不同图像，然后整个图像消失.

Goal: First I want to show the happy face image. When the user clicks on the happy face image I want to change it to a sad face image for 1 second. After 1 second I want to change it back to the happy face until the user clicks on the happy face 3 times. In the third click, I want to change it to a different image that shows up for 1 second then the whole image disappears.

我该怎么做?

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的函数，并在1s后使用超时时间调用这个函数.同样隐藏元素使用 .style.visibility = "hidden"

you can use setTimeout(), make a function to reset image src, and use a timeout to call this function after 1s. Also to hide an element use .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)
 
}

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

这篇关于在一定时间内通过单击更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！