Как я могу повернуть элемент на 180 градусов назад на 0 градусов, используя ту же кнопку в JavaScript - PullRequest
Новая
       9

Как я могу повернуть элемент на 180 градусов назад на 0 градусов, используя ту же кнопку в JavaScript

0 голосов
/ 24 октября 2019

код повторяется снова и снова. Мне нужно, чтобы кнопка повернулась на 180, затем снова на 0 градусов, затем снова на 180, увеличивая и уменьшая на 45 градусов 

<!DOCTYPE html>
<html>

<head>
  <title>ttt</title>
</head>

<body>
  <div id="memo" style="position: fixed;margin: 140px;">
    _____________
  </div>

  <button onclick="myfun()">Rotate</button>
  <script>
    function myfun() {
      var i = 0
      i += 45;
      document.getElementById("memo").style.transform += "rotate(" + i + "deg)";
    }
  </script>
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 24 октября 2019

Это должно сделать это. Мы начинаем с направления + Всякий раз, когда вращение достигает 180, меняем направление на - Когда вращение достигает 0, меняем направление назад на +. Отслеживаем вращение в переменной i 

<!DOCTYPE html>
<html>

<head>
  <title>ttt</title>
</head>

<body>
  <div id="memo" style="position: fixed;margin: 140px;">
    _____________
  </div>

  <button onclick="myfun()">Rotate</button>
  <script>
    let i = 0;
    let direction = '+';

    function myfun() {
        if (i === 180) direction = '-';
        if (i === 0) direction = '+';
        if (i < 180 && direction === '+') {
          i += 45;
        } else {
          i -= 45;
        }
        console.log(i);
      document.getElementById("memo").style.transform += "rotate(" + direction + 45 + "deg)" ;
    }
  </script>
</body>
</html>
0 голосов
/ 24 октября 2019

Сначала необходимо получить вращение элемента как переменную, затем вы можете изменить направление вращения, например, следующим образом. 

if(currentrotation>=180)
    {
     rightrotation=false
    };
else if(currentrotation<=0)
    {
    rightrotation=true
    }

if(rightrotation)
   {
    i+=45;
   }
else
   {
   i-=45;
   }

Чтобы получить текущее значение вращения, вам нужно выполнить некоторые математические функции. ,Я нашел этот веб-сайт, который объясняет это Получить значение поворота css

РЕДАКТИРОВАТЬ: @Frank Castle уже выложил лучшее решение

0 голосов
/ 24 октября 2019

Поворот чего-либо на 180 градусов, а затем возврат к 0 - это то же самое, что поворот на 360 градусов, верно? Зачем вам нужно поворачивать его обратно на 0, если вы можете просто продолжать увеличиваться на 180?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...