Блог

Главная - Вопросы по программированию - Почему эта функция не может использовать непрозрачность?

Почему эта функция не может использовать непрозрачность?

#javascript #html #css #web #opacity

Вопрос:

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

 <!DOCTYPE html>
<html>
  <head>
    <style>
    img {
    width: 128px;
    height: 128px;
    padding: 10px;
  }

  img:hover {
    opacity: 0.5;
  }
    </style>
  </head>
  <body>
    <div id="epicenter">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Face-devil-grin.svg/1024px-Face-devil-grin.svg.png" alt="Schwarz" id="black">
    </div>
    <button onclick="test()">Test</button>
    
    <script>
    function sleep(miliseconds) {
    var currentTime = new Date().getTime();
    while (currentTime   miliseconds >= new Date().getTime()) {
    }
    }
    
    function test() {
    document.getElementById("black").style.opacity = "0.33";
    sleep(3000);
    document.getElementById("black").style.opacity = "1";
    }
    </script>
  </body>
</html>

Ответ №1:

Использование setTimeout намного проще.

 function test() {
  const el = document.getElementById('black');
  el.style.opacity = '0.33';
  setTimeout(() => el.style.opacity = '1', 3000);
} 
 img  width: 128px height: 128px padding: 10px; }
img:hover { opacity: 0.5; } 
 <div id="epicenter">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Face-devil-grin.svg/1024px-Face-devil-grin.svg.png" alt="Schwarz" id="black">
</div>
<button onclick="test()">Test</button>

Ответ №2:

Вы должны использовать setTimeout вместо определения собственной функции сна.

 setTimeout(function(){
    document.getElementById("black").style.opacity = 1;
}, 3000);

Замените вызов функции сна приведенным выше.

См. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals для получения более подробной информации

Метки: