javascript - jquery段总是显示错误的数字？

Question

我正在尝试使用 jquery 创建命运之轮类型的动画，但由于某种原因，我使用的代码总是显示错误的数字!

这是 jsfiddle:http://jsfiddle.net/wf49mqaa/2/

点击轮盘中的白色区域观看动画，您会看到显示错误的数字!

目前我的 jquery 代码中只有 4 列和 4 个段，但将来我将从数据库中提取段的数量，我需要它始终正常工作并显示正确的数字。

我尝试了一切，从将 segment = Math.ceil(((percent/100) * 4)), 更改为 segment = Math.ceil(((percent/100) * 4) -1), 以及segment = Math.ceil(((percent/100) * 5)),

它仍然显示错误的号码!

有人可以就此提出建议吗？

谢谢

Answer 1

我在 Non-working demo from sitepoint 中找到了您使用的部分代码.，深入挖掘一下，有两个不同的错误/问题可以解决命运轮行为:

第一:如何定义程度:

// existing code fragment (wrong)
var deg = 1500 + Math.round(Math.random() * 1500);

这会导致轮子停在完全随机的位置，但这不是您所需要的。轮子应该始终停在标记位置，它应该只转动随机数量的段。

// supposing you have a wheel with 4 segments (here the items array):

var deg = 0, /* basic degree */
    spinbase = 1080, /* basic spinning of the wheel, here 3 times full turn */
    items = [1,2,3,4];

// your spinning function...
spin: function () {
    var min = 1, 
        max = 10, 
        rand = Math.floor(min + Math.random()*(max+1-min));
    [...]
        // like this you'll stop at the same position, 
        // but the wheel moved by a random number of segments
        deg = deg + ( Math.round( 360 / items.length ) * rand) + spinbase;
    [...]
}

第二:如何获得正确的段:

简而言之:

   // where deg is the current degree, and items the array from above.
   var segmentIndex = Math.ceil(
    (deg - (360 * parseInt(deg / 360))) / 
        Math.round(360/items.length)
   );

填充算法时..

   // e.g. deg is (degree of each segment) * random (here 5) + 1080
   // deg = 1530 (1080 + ( (360/4) * 5) )
   // (1530 - (360 * parseInt( 1530 / 360))) / Math.round(360 / 4);
   // (1530 - (360 * 4)) / 90;
   // 90 / 90 = 1
   // since we have 4 segments only and the random number is higher, 
   // the wheel did another full turn + 1 (from the starting number) 
   // so we get items[ 1 ] = (result: 2);
   // due to the ceil/floor/round methods in calculation it can happen
   // that you reach the extrem values segments.length or less than 0,
   // to fix this:

    var segmentIndex = Math.ceil(
    (deg - (360 * parseInt(deg / 360))) / 
        Math.round(360/items.length)
   );

   if(target < 0 ) { target = segment.length - 1; }
   if(target === segments.length ) { target = 0; }
   alert( 'Winning: ' + items[target] );

将这些放在一起，您将得到一个有效的 fortune-wheel 。我允许自己创建命运轮的新变体，它能够处理不同数量的段，从而更容易证明算法。