javascript - 度。轮流

Question

我正在构建时间选择器，您可以在其中设置“真实”时钟的时间。 我正在使用此脚本找到鼠标的位置和度数 + 旋转 div

var g;
        var h;
        if (e.target.id == "rotationSliderContainer") {

            g = e.offsetX;
            h = e.offsetY;
        } else {
            g = e.target.offsetLeft + e.offsetX;
            h = e.target.offsetTop + e.offsetY;
        }
        var atan = Math.atan2(g - radius, h - radius);
        deg = -atan / (Math.PI / 180) + 180;

        var presne = Math.abs(deg - (Math.round(deg / 30) * 30));

        if (presne <= 2) deg = Math.round(deg / 30) * 30;

        if(deg == 360)
                deg = 0;
        two.style.transform = "rotate(" + deg + "deg)";

它工作正常，但几乎没有错误，每当我想在 12 和 1,2,3 之间移动 div 时，它会在 12 和其中一个值之间翻转。

这是一个现场演示 http://jsfiddle.net/Trolstover/afo7ky03/1/ 有什么捷径可以防止这种不良行为，还是我只是在某处犯了错误？

Answer 1

这个 if/else 条件是在 rotationSliderContainer 和其他 DOM 元素(例如 rotationSlider 和 body)中的事件之间切换。其他情况是你的罪魁祸首。

if (e.target.id == "rotationSliderContainer") {

        g = e.offsetX;
        h = e.offsetY;
    } else {
        g = e.target.offsetLeft + e.offsetX;
        h = e.target.offsetTop + e.offsetY;
    }

去掉这两行应该没问题。

    if (e.target.id == "rotationSliderContainer") {

        g = e.offsetX;
        h = e.offsetY;
    }

酷时钟^_^