Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.04.2019, 22:35
Кандидат Javascript-наук
Отправить личное сообщение для dima85 Посмотреть профиль Найти все сообщения от dima85
 
Регистрация: 14.03.2010
Сообщений: 148

Тянем пальцем на телефоне и изменяем цифру.
Есть div#block когда мы в нем проводим на телефоне пальцев в верх через каждые 100 пикселей цифра уменьшаются -1, когда проводим в низ увеличиваются +1.
Мой код работает, но когда я провел пальцев в низ, а потом еще раз в низ, цифра на доли секуд уменьшается а потом начинает увеличиваться как и нужно. Я не могу избавится от этого глюка. Помогите пожалуйста.
Или может по другому лучше как-то написать этот код?

document.getElementById('block').addEventListener('touchmove', function(e) {
mouseY = e.touches[0].clientY;
e.preventDefault();
var actual_temp = document.getElementById("value").innerHTML;
var calc_actual = (mouseY/100).toFixed(0);
if (calc_move < calc_actual) {
  document.getElementById("value").innerHTML = Number(actual_temp)+1;
  calc_move = (mouseY/100).toFixed(0);
}
if (calc_move > calc_actual) {
  document.getElementById("value").innerHTML = Number(actual_temp)-1;
  calc_move = (mouseY/100).toFixed(0);
}
});

Последний раз редактировалось dima85, 25.04.2019 в 22:39.
Ответить с цитированием
  #2 (permalink)  
Старый 25.04.2019, 23:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,848

dima85,
touchstart touchend не хватает
Ответить с цитированием
  #3 (permalink)  
Старый 26.04.2019, 00:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,848

dima85,
<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css"> #block{
        height: 550px;
        width: 80px;
        background-color: #228B22;
    }

    </style>


</head>

<body>
<div id="value">0</div>
<div id="block"></div>

<script>
addEventListener("load", function() {

    class Range {
        constructor(band, out, num = 0, step = 100, min = 10, max = 100) {
            this.band = band;
            this.out = out;
            this.num = num;
            this.delta = 0;
            this.step = step;
            this.y = 0;
            this.active = false;
            this.min = min;
            this.max = max;
            this.setNum(num);
            this.eventHandler = this.eventHandler.bind(this);
            this.band.addEventListener("touchstart", this.eventHandler);
            this.band.addEventListener("touchmove", this.eventHandler);
            this.band.addEventListener("touchend", this.eventHandler);

        }

        eventHandler(event) {
            event.preventDefault();
            if (event.type === "touchstart") {
                this.y = event.touches[0].clientY;
                this.active = true;
            }
            if (!this.active) return;
            if (event.type === "touchmove") {
                this.delta = (event.touches[0].clientY - this.y) / this.step | 0;
                this.setNum(this.num + this.delta)
            }
            if (event.type === "touchend") {
                this.num += this.delta;
                this.num = this.limitNum(this.num);
                this.active = false
            }

        }

        setNum(num) {
            this.out.innerHTML = this.limitNum(num)
        }
        limitNum(num) {
            return Math.max(this.min, Math.min(num, this.max))
        }
    }

    new Range(document.querySelector("#block"), document.querySelector("#value"), 80);

})
    </script>
</body>
</html>

Последний раз редактировалось рони, 26.04.2019 в 14:44.
Ответить с цитированием
  #4 (permalink)  
Старый 26.04.2019, 11:31
Кандидат Javascript-наук
Отправить личное сообщение для dima85 Посмотреть профиль Найти все сообщения от dima85
 
Регистрация: 14.03.2010
Сообщений: 148

Помогите пожалуйста сделать минимальные и максимальные значения.
Например выше 100 и меньше 10 сделать нельзя,
я делаю так:
if (num < 100 && num > 10) {
this.out.innerHTML = num;
}

Но когда достигаю этих приделов и пытаюсь потом крутить в другую сторону не сразу цифры меняются.

Последний раз редактировалось dima85, 26.04.2019 в 12:15.
Ответить с цитированием
  #5 (permalink)  
Старый 26.04.2019, 14:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,848

Сообщение от dima85
Например выше 100 и меньше 10 сделать нельзя,
добавлено
Ответить с цитированием
  #6 (permalink)  
Старый 26.04.2019, 15:11
Кандидат Javascript-наук
Отправить личное сообщение для dima85 Посмотреть профиль Найти все сообщения от dima85
 
Регистрация: 14.03.2010
Сообщений: 148

Спасибо, большое!
Ответить с цитированием
Ответ



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

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