未添加/减去正确金额的值以及if/else语句错误

Value not adding/subtracting correct amount and if/else statement bugs

本文关键字:if 语句 错误 else 金额 添加      更新时间:2023-09-26

我有一个脚本,它将元素添加到div中,将它们旋转一段时间,然后当达到时间量时,旋转停止,并为div中的随机元素设置动画。

我有几个问题:

  1. 如果打开// alert(maxspeed)//alert(maxcount)警报,然后单击"运行"(编辑:首先单击"追加所有"(来运行脚本,您会看到值以0.1的速率进行加法/减法运算,但会在这里或那里损失0.00000001左右,为什么会出现这种情况(可能是由于编码错误导致的内存问题?(?

  2. 单击"Run"(编辑:首先单击"append all"(后,图像将开始动画化,但为什么动画有时是随机的?当它所要做的只是将maxspeed增加0.1的值一次时

  3. 最后;为什么在满足"if"的条件之前,它似乎进入了我的if/else语句的"else"阶段?

我是JS/jQuery的新手,所以请原谅任何糟糕的编码(我遵循了一个教程来实现轮换效果(。

这是我的jsFiddlehttp://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});        
            }
    }
});

});

第一个问题的答案是浮点运算是一种近似;你不应该期望得到确切的答案。SO对此有很多疑问;这是最近的一个:乘法错误

至于你的其他问题,它们可能与上面的浮点运算问题、糟糕的编码结果或其他问题有关。我在阅读你的代码和/或理解你想要什么时遇到了困难,即使是从JSFiddle。以下是一些要做的事情:

  • 尝试在最高级别定义函数(counter、rotate(,而不是在onclick处理程序中
  • 似乎从一开始就运行rotate(),而不是单击run。看起来有点早,不是吗
  • parseFloat((只有在您试图将字符串(例如"1.94"(转换为浮点(例如1.94(时才是必要的。在这里,您似乎没有使用字符串,所以可能没有必要
  • 放下多余的东西。所有那些"加卢克"的东西对解决这个问题并不是必不可少的

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

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

浮点是一个近似值,因此……
假设你想反复减去0.01

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

如果你继续做

num -= dec;

你会得到不准确的结果。要使其正常化,请尝试:

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

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