Изменить кнопку на нажатие в течение нескольких секунд

Question

Я хотел бы изменить источник изображения кнопки на несколько секунд при нажатии.

На данный момент у меня есть это:

setTimeout(function(){document.getElementById('buttonImg').src='images/button2.png';},5000);

Но что это делает, это изменение изображения после 5секунд вместо 5 секунд.Я не могу понять, как изменить функцию setTimeout для этого

Answer 1

Вы можете сделать это!

document.getElementById('buttonImg').src='images/button2.png';
 setTimeout(function() {
     document.getElementById('buttonImg').src='[the source of the original image]';
 } ,5000);

Answer 2

Вам необходимо отслеживать исходное изображение, чтобы его можно было заменить через 5000 миллисекунд.Как то так,

function clickBtn(){
 var originalSrc = document.getElementById('buttonImg').src;
 document.getElementById('buttonImg').src = 'https://www.freeiconspng.com/minicovers/submit-button-png-18.png'
  setTimeout(function(){
    document.getElementById('buttonImg').src=originalSrc;
  },5000);
}

<img id='buttonImg' src='https://www.freeiconspng.com/minicovers/submit-button-png-9.png' onclick='clickBtn()' />

Answer 3

Функция setTimeout выполняет первые параметры после задержки, заданной во втором параметре.Поэтому сначала немедленно измените ваше изображение:

document.getElementById('buttonImg').src='images/button2.png';

Затем просто вернитесь к предыдущему изображению после задержки в 5 с (5000 мс):

setTimeout(function(){
     document.getElementById('buttonImg').src='images/button1.png';
},5000);