Jump to content

Vasilyyy

Neophyte
  • Posts

    2
  • Joined

  • Last visited

Everything posted by Vasilyyy

  1. Что, если создать переменную и отслеживать ее значение? типа такого: a = 0; function q1() { addEventListerning('id'); (сделать какую-нибудь анимацию с добавлением класса) a = 1; else { addEventListerning('id') (сделать какую-нибудь анимацию с добавлением класса, можно другую) } }
  2. Доброго времени суток. Я начинающий в изучении JavaScript. Во время моих уроков я столкнулся с проблемой, которую не могу решить уже 4 дня. Она состоит в том, что при первом клике значок переворачивается на 180 градусов направо, а по следующему клику он должен крутиться в реверсе. В чем я допустил ошибку? Вот код, который я использовал в письменном виде: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <button id="animStart" onclick="itemSpin();itemSpinRev();"><span id="burger">☰</span></button> <script type="text/javascript"> function itemSpin(normal) { animStart.classList.add('anim'); var start = getMilliseconds(ms); var spinner = getMilliseconds(ms) - start; if(spinner >= 400) { animStart.classList.remove('anim'); // animStart.classList.add('animate'); // // animStart.classList.toggle('animate'); } }; function itemSpinRev(reverse) { animStart.classList.add('animate'); var start = getMilliseconds(); var reverse = getMilliseconds() - start; if(reverse >= 400) { animStart.classList.remove('animate'); } }; </script> </body> </html> body { background: #4f5a6e; margin: 0; padding: 0; } #animStart { position: absolute; background-color: #4f5a6e; margin-left: 10px; margin-top: 10px; border: none; font-size: 20px; cursor: pointer; outline: none; } #animStart.anim { animation-name: spin; animation-duration: 0.4s; animation-timing-function: linear; } #animStart.animate { animation-name: spin; animation-duration: 0.4s; animation-timing-function: linear; animation-direction: reverse; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy