Форум

dima85 · #1 (**permalink**) 25.04.2019, 22:35

Есть 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);
}
});

рони · #2 (**permalink**) 25.04.2019, 23:13

dima85,
touchstart touchend не хватает

рони · #3 (**permalink**) 26.04.2019, 00:35

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>

dima85 · #4 (**permalink**) 26.04.2019, 11:31

Помогите пожалуйста сделать минимальные и максимальные значения.
Например выше 100 и меньше 10 сделать нельзя,
я делаю так:

if (num < 100 && num > 10) {
this.out.innerHTML = num;
}

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

рони · #5 (**permalink**) 26.04.2019, 14:44

Сообщение от dima85

Например выше 100 и меньше 10 сделать нельзя,

добавлено

dima85 · #6 (**permalink**) 26.04.2019, 15:11

Спасибо, большое!

Форум

Справочник

Discord чат

Курсы javascript