Тянем пальцем на телефоне и изменяем цифру.
Есть 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,
touchstart touchend не хватает |
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> |
Помогите пожалуйста сделать минимальные и максимальные значения.
Например выше 100 и меньше 10 сделать нельзя, я делаю так: if (num < 100 && num > 10) { this.out.innerHTML = num; } Но когда достигаю этих приделов и пытаюсь потом крутить в другую сторону не сразу цифры меняются. |
Цитата:
|
Спасибо, большое!
|
Часовой пояс GMT +3, время: 09:09. |