Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.06.2019, 19:23
Аспирант
Отправить личное сообщение для maplol123@gmail.com Посмотреть профиль Найти все сообщения от maplol123@gmail.com
 
Регистрация: 30.06.2019
Сообщений: 41

Как сделать подсчет оборотов в js из css?
Здравствуйте, я только начинаю разбираться в js и хочу для себя сделать кликер:
https://codepen.io/maplol/pen/bPLaMG
Как сделать подсчет оборотов при нажатии на картинку? Ну и правильно ли я беру переменные из css? И вообще правильный ли код?
Ответить с цитированием
  #2 (permalink)  
Старый 30.06.2019, 20:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

rotate count, счётчик поворотов
maplol123@gmail.com,
формула угла поворота по ссылке ниже
https://vk-book.ru/poluchenie-ugla-n...mi-javascript/
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.back{
    width: 20%;
    transition:all 0.5s ease;
    z-index: 0;
    border-radius: 100%;
}

.rotate {
    width: 30%;
    animation: rotate 2s linear infinite normal;
}
@keyframes rotate{
    from {
        transform: rotate(var(--palatte-padding-left));

    }
}

div{
    user-select: none;
}
.rasp{
    top: 50px;
    left: 40px;
    pointer-events:none;
    z-index: 999;
}
.anim{
    position: absolute;
    margin: 5%;
}
:root {
    --palatte-padding-left: 360deg;
}
  </style>

</head>

<body>
<div class="anim"><img draggable="false" src="https://png2.kisspng.com/sh/b4c2c128c6ea74b7569a5321626f4ed9/L0KzQYm3VsA1N6pujZH0aYP2gLBuTgdqdJ0yi99ydHiwc73wkL1ieqUyguQ2c33shLm0VfIyPJQ7fKsDMEW1Roi1UMU1OGM7T6Q6NUK7QImBUsgyPWM6TpD5bne=/kisspng-will-smith-clip-art-jr-smith-5b14c6d9805267.0540267215280882815256.png" alt="smith" id="Canv" class="back">
</div>
<div class="increment"><p id="out">0</p></div>
<script>
var click = 0,
    timer;

function getDegreeElementById(id_element) {
    var element = document.getElementById(id_element);
    var style = window.getComputedStyle(element, null);
    var valueStyle = style.getPropertyValue("transform");
    if (valueStyle == "none") return 0;
    var values = valueStyle.split("(")[1];
    values = values.split(")")[0];
    values = values.split(",");
    var cos = values[0];
    var sin = values[1];
    var degree = Math.round(Math.asin(sin) * (180 / Math.PI));
    if (cos < 0) {
        addDegree = 90 - Math.round(Math.asin(sin) * (180 / Math.PI));
        degree = 90 + addDegree
    }
    if (degree < 0) degree = 360 + degree;
    return degree
}
Canv.onmouseup = function() {
    this.classList.remove("rotate");
    cancelAnimationFrame(timer)
};
var img = document.querySelector("img");
img.addEventListener("mousedown", function() {
    Canv.classList.add("rotate");
    var old = 360;

    function increment() {
        var c = getDegreeElementById("Canv") || 360;
        if (c > old) {
            click++;
            old = 360;
            document.getElementById("out").innerHTML = click
        }
        old = c;
        timer = requestAnimationFrame(increment)
    }
    timer = requestAnimationFrame(increment)
});
</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 30.06.2019, 20:54
Аспирант
Отправить личное сообщение для maplol123@gmail.com Посмотреть профиль Найти все сообщения от maplol123@gmail.com
 
Регистрация: 30.06.2019
Сообщений: 41

рони,
Огромное спасибо! сейчас буду разбираться
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать игру чисел JS? VaytonJS Javascript под браузер 3 19.11.2018 10:29
Как сделать такую страницу mortido Элементы интерфейса 11 02.10.2014 07:20
Как сделать выполнение одного JS после выполнения другого vita1ii Events/DOM/Window 2 11.01.2013 18:52
Как обратиться к свойству CSS через JS? Дмитрий 87 Events/DOM/Window 4 14.12.2012 16:56
Вставка блока php в js...Как сделать? reup Общие вопросы Javascript 2 30.07.2009 11:02