javascript - Gameshow JavaScript 微调器找不到值

标签 javascript css

我正在尝试获取微调器的结果。经过 6 小时的调试和各种数学尝试后,我似乎无法找出每次旋转时如何获得微调器的值。它落在什么 DIV 上?!

http://codepen.io/anon/pen/OMrOPe

最初我认为下面的算法会起作用。

total_rotations = Get Total Degrees in rotations (including what was done historically.
total_rotations /  360 = _total_rotations_of_a_circle
value_to_subtract = Take the absolute value of _total_rotations_of_a_circle * 360
left_over_value_in_Degree = total_rotations - value_to_subtract
left_over_value_in_Degree/60 = result.

此算法仅在某些时候有效。我只是不确定该怎么做,任何提示都会有所帮助。

aoY 变量是由原始开发人员提供的,但我不知道如何使用该值来找到它指向的实际 div。我需要什么数学知识?

$('#wheel .sec').each(function(){
            var t = $(this);
            var noY = 0;

        var c = 0;
        var n = 700;    
        var interval = setInterval(function () {
            c++;                
            if (c === n) { 
                clearInterval(interval);                
            }   

            var aoY = t.offset().top;
            $("#txt").html(aoY);
            console.log(aoY);

            /*23.7 is the minumum offset number that 
            each section can get, in a 30 angle degree.
            So, if the offset reaches 23.7, then we know
            that it has a 30 degree angle and therefore, 
            exactly aligned with the spin btn*/
            if(aoY < 23.89){
                console.log('<<<<<<<<');
                $('#spin').addClass('spin');
                setTimeout(function () { 
                    $('#spin').removeClass('spin');
                }, 100);    
            }
        }, 10);

        $('#inner-wheel').css({
            'transform' : 'rotate(' + totalDegree + 'deg)'          
        });

        noY = t.offset().top;

    });
});

最佳答案

RobG 提出的公式是正确的:

Math.ceil((( totalDegree + 30 ) % 360)/60)

您还必须考虑的一点是,每次连续播放时偏移量都会发生变化。为了解决这个问题,您可以简单地使用这个公式:

offset = extraDegree MOD 60

然后您可以将函数中的数字 30 替换为偏移量变量:

Math.ceil((( totalDegree + offset ) % 360)/60)

See this fiddle

关于javascript - Gameshow JavaScript 微调器找不到值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35330042/

相关文章:

Javascript 在服务器上对 HTML 实体进行编码

javascript - 为什么将 defer 与 Google Maps Javascript 一起使用?

javascript - CSS/JavaScript 使用 Div 使页面部分变灰

伪元素上的 CSS3 转换 ( :after, :before) not working?

twitter-bootstrap - Twitter Bootstrap 响应式布局在 IE8 或更低版本中不起作用

javascript - 单击按钮时显示工具提示

javascript - 从 AngularJS 更改 CSS

grid - 如何获得等高列表项的网格?

html - Chrome 中隐藏文字之谜

javascript - Div 不完全等于具有继承值的父 div 的高度