Показать сообщение отдельно
  #4 (permalink)  
Старый 15.09.2017, 13:38
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Что-то скучно стало...
Можно кликать и даблкликать.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body{
      background: #202020;
    }

    div.rect {
      width: 150px;
      height: 150px;

      background: yellow;
    }
  </style>
</head>
<body>
  <div class="rect" id="rotate-rect"></div>
  <script>
    var rect = document.getElementById('rotate-rect');
    var a = 1, b = 0, c = 0, d = 1, tx = 100, ty = 100, angle = 0, currentAngle;
    var prev = new Date();
    var n = 0;
    function getAngleToRAD(){
      angle += n;
      if(angle >= 360){
        angle -= 360;
      }

      return angle * Math.PI / 180;
    }


    function update(){
      currentAngle = getAngleToRAD();

      rect.style.transform = 'matrix(' + Math.cos(currentAngle) + ',' + Math.sin(currentAngle) + ',' + -Math.sin(currentAngle) + ',' + Math.cos(currentAngle) + ',' + tx + ',' + tx + ')'
      window.requestAnimationFrame(update);
    }

            document.querySelector('.rect').addEventListener('click', function() {
             var current = new Date(),
                     delta = current - prev;
              prev = current;
              if(delta < 1000)   return false; 
               n += 3
            });
            document.querySelector('.rect').addEventListener('dblclick', function() {
             var current = new Date();
             prev = current;
             n -= 6
            });

    update();
  </script>
</body>
</html>

Последний раз редактировалось Dilettante_Pro, 15.09.2017 в 13:40.
Ответить с цитированием