AlexaShemetova
@AlexaShemetova
While I'm breathing - I love and believe

Почему округление до целого числа получается с ошибкой js?

Всем привет, делаю ползунок диапазона, нужны только целые числа, периодически при движении ползунка выпадают дробные числа
5f26fb8d39086769884613.jpeg

Вот код
let thumb = slider.querySelector('.thumb');
let thumbVal = document.querySelector('.thumb__val');

let step = 1;
let max = 120;
let min = 0;

let sliderWidth = slider.offsetWidth;
// console.log(sliderWidth);

thumb.style.left = 0 + 'px';
thumbVal.innerHTML = min;

console.log('math ' + Math.round(0.996842105));

thumb.onmousedown = function(e) {
    e.preventDefault(); // предотвратить запуск выделения (действие браузера)

    let shiftX = event.clientX - thumb.getBoundingClientRect().left;

    // console.log('Курсор ' + event.clientX);
    // console.log('Ползунок ' + thumb.getBoundingClientRect().left);
    // console.log('Курсор внутри ползунка ' + shiftX);
    // console.log('Слайдер ' + slider.getBoundingClientRect().left);

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);

    function onMouseMove(event) {
        let newLeft = event.clientX - shiftX - slider.getBoundingClientRect().left;
        console.log(newLeft);

        // курсор вышел из слайдера => оставить бегунок в его границах.
        if (newLeft < 0) {
            newLeft = 0;
        }

        let rightEdge = slider.offsetWidth - thumb.offsetWidth;

        if (newLeft > rightEdge) {
            newLeft = rightEdge;
        }

        var stepCount = (max - min) / step;
        // console.log('stepCount ' + stepCount);
        var stepSize = (slider.offsetWidth - thumb.offsetWidth) / stepCount;
        // console.log('stepSize ' + stepSize);

        var left = Math.round(newLeft / stepSize) * stepSize;
        console.log('left ' + left);

        thumb.style.left = left + 'px';

        thumbVal.innerHTML = (left / stepSize) * step;

    }

    function onMouseUp() {
        document.removeEventListener('mouseup', onMouseUp);
        document.removeEventListener('mousemove', onMouseMove);
    }

};

thumb.ondragstart = function() {
    return false;
};
  • Вопрос задан
  • 128 просмотров
Решения вопроса 2
Raxen
@Raxen
Senior Frontend Developer, X5 Retail Group
Поменяйте это
var left = Math.round(newLeft / stepSize) * stepSize;
        console.log('left ' + left);

        thumb.style.left = left + 'px';

        thumbVal.innerHTML = (left / stepSize) * step;


На это
var left = Math.round(newLeft / stepSize) * stepSize;
        console.log('left ' + left);

        thumb.style.left = left + 'px';

        thumbVal.innerHTML = Math.round(left / stepSize) * step;
Ответ написан
Aetae
@Aetae
Тлен
Ответ на вопрос: потому что используются числа с плавающей точкой.
Если нужно округлённое число - округляйте непосредственно перед использованием\выводом. Любая математическая операция может добавить немного "мусора" при определённых условиях.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы