值未加/减正确数量和 if/else 语句错误

Question

我有一个脚本，可以将元素添加到 div，将它们旋转一段时间，然后当达到一定时间时，旋转停止并且 div 中的随机元素被动画化。

我有几个问题：

1234563 0.1 但会在这里或那里输掉 0.00000001 左右，这是为什么（可能是由于编码不佳导致的内存问题？）？

1. 点击“运行”后（编辑：先点击全部追加），图像将开始动画，但为什么动画有时是随机的？当它应该做的只是将maxspeed 一次增加0.1 的值时

2. 最后；为什么在满足 'if' 的条件之前，它似乎到达了我的 if/else 语句的 'else' 阶段？

我是 JS/jQuery 的新手，所以请原谅任何糟糕的编码（我按照教程实现了旋转效果）。

这是我的 jsFiddle http://jsfiddle.net/pAk9N/9/ 和下面的 jQuery 代码，谢谢 :)

$(document).ready(function(){
//You can edit the following file paths to change images in selection
var img1 = '<img src="/img/logo.png">';
var img2 = '<img src="/img/logo.png">';
var img3 = '<img src="/img/logo.png">';
var img4 = '<img src="/img/logo.png">';
var img5 = '<img src="/img/logo.png">';
var img6 = '<img src="/img/logo.png">';
var all = img1 + img2 + img3 + img4 + img5 + img6;

//Rotation part 1
var maxspeed = 0.00;
var minspeed = 0.01;
var stopped = 0.0;        
var speed = maxspeed;        
var radius = 100;        
var count = 0;

function rotate()
{
    var centerx = $(document).width()/2;
    var centery = $(document).height()/2;            
    var num_items = $("#container > img").length;        
    $("#container > img").each(function(){
        var angle = count * (Math.PI/180);                
        var newx = centerx + Math.cos(angle)*radius - $(this).width()/2;                
        var newy = centery + Math.sin(angle)*radius - $(this).height()/2;                
        $(this).css("left",newx+"px").css("top",newy+"px");                
        count += 360/num_items + speed;
    });
}

//Rotation part 2
setInterval(rotate,1000/360);
$(document).mousemove(function(e)
{
    var dw = $(document).width();
    var dh = $(document).height();
    var itemh = $("#container > img").height();
    var itemw = $("#container > img").width();

    if (e.pageX > dw/2-radius-itemw/2 && e.pageX < dw/2 + radius + itemw/2 && e.pageY > dh/2-radius-itemh/2 && e.pageY < dh/2+radius+itemh/2)
        {
            speed = minspeed;
        }
    else
        {
            speed = maxspeed;
        }
});

//Append elements to container
$("#appendall").click(function(){$('#container').append(all);});
$('#append').children().eq(2).click(function(){$('#container').append(img1);});
$('#append').children().eq(3).click(function(){$('#container').append(img2);});
$('#append').children().eq(4).click(function(){$('#container').append(img3);});
$('#append').children().eq(5).click(function(){$('#container').append(img4);});
$('#append').children().eq(6).click(function(){$('#container').append(img5);});
$('#append').children().eq(7).click(function(){$('#container').append(img6);});

//Refresh page
$("#reset").click(function(){location.reload();});

//IF speed is greater than 0 - ELSE add animation to div element
$("#run").click(function(){
    var maxcount = 1.00;
    var incdec = 0.01;
    counter()
    function counter()
    {
        if (parseFloat(maxcount) >= 0.00)
            {
                maxcount = parseFloat(maxcount) - parseFloat(incdec);
                maxspeed = parseFloat(maxspeed) + parseFloat(incdec);
               // alert(maxspeed)
                //alert(maxcount)
                setTimeout(counter,40);
            }         
        else
            {     
                maxspeed = 0;
                //Find amount of div elements and add 1
                var brewees = $('#container').children().length +=1;
                //get a random number
                var rand = (Math.floor(Math.random()*brewees));    
                var ap = '20px';
                var ab = '#ddd';
                var ad = 1000;
                //match random number corrosponding child in div
                $('#container').children().eq(parseFloat(rand))
                .animate({padding: ap, background : ab}, {duration:ad});        
            }
    }
});

});

Answer 1

第一个问题的答案是浮点运算是一种近似值；你不应该期望得到准确的答案。关于这个有很多问题；这是最近的一个：multiplication error

至于您的其他问题，可能与上面的浮点算术问题，编码不佳的结果或其他原因有关。我无法阅读您的代码和/或理解您想要的内容，即使是从 JSFiddle 中也是如此。这里有一些事情要做：

• 尝试在最高级别定义您的函数（计数器、旋转），而不是在 onclick 处理程序中。
• 似乎您从一开始就运行rotate()，而不是在单击run 时运行。好像有点早了吧？
• parseFloat() 仅在您尝试将字符串（例如“1.94”）转换为浮点数（例如 1.94）时才需要。您似乎没有在这里使用字符串，因此可能没有必要。
• 放下额外的东西。所有“添加卢克”的东西对于解决这个问题并不是必不可少的。

一旦您将代码精简到最低限度，您可能会解决您的问题和/或我们可以提供进一步的帮助。

另一个选择是使用 jQuery 动画功能。经过快速搜索后，我看到了一些旋转插件。您也可以只使用核心animate() 来修改CSS。

Answer 2

浮点是一个近似值，所以....
假设您想重复减去 0.01。
让

var dec = 0.01; //decrement
var num = 5;

如果你继续这样做

num -= dec;

您将得到不准确的结果。 要使其正常化，请尝试：

num = Math.floor((num - dec)*100)/100;

**注意：**同样的事情可以用增量来完成（只需将'-'替换为'+'）