Javascript 如何防止值舍入为零

我有两个按钮，一个使div（大小不同）变大10倍，另一个使div变小10倍。单击两次使其变小的按钮后，div四舍五入为零。无论你点击使它变大的按钮多少次，它都不会变大，因为它会乘以零值。解决这个问题的标准方法是什么？这是必要的，因为在我的应用程序中，一些div比其他div大得多，因此，虽然一个div的宽度小于一个像素（并且理所当然地是不可见的），但其他div的宽度将达到数千个像素

更新：我的div实际上是代表行星直径的圆。我需要这些是准确的！如果我单击较小的按钮5次，我希望能够单击较大的按钮5次，并使其返回到最初的确切直径

此外，可能没有必要使div变小或变大无限次。标准的限制方法是什么？请参阅我的JSFIDLE，以了解我试图实现的目标的示例

HTML

JavaScript

$('a').click(function() {
    if($(this).hasClass('smaller')) {
        var element = $('div');
        element.animate({
            'width' : element.width() * 0.1,
            'height' : element.height() * 0.1
        });
    } else if($(this).hasClass('larger')) {
        var element = $('div');
        element.animate({
            'width' : element.width() * 10,
            'height' : element.height() * 10
        });
    }
});

---

在我看来，问题与其说是div归零，还不如说是让他们再次远离它

这很容易做到：

'width' : (element.width() * 10) || 1

工作原理：如果

element.width（）

返回

0

，当然

0*10

也是

0

0

是一个错误的值，因此

|

使用

1

或者，如果您愿意：

'width' : (element.width() || 1) * 10

…这会更快地生效。：-）

---

更多信息：

鉴于

0

的计算结果为“false”（或false ish），如果

width（）

或

height（）

返回

0

，则可以使用

|
操作符传递
1
：

var element = $('div');
element.animate({
    'width' : (element.width() || 1) * 10,
    'height' : (element.height() || 1) * 10
});

.
我想这就是你想要的：

var element = $('div');
element.animate({
    'width' : Math.max(element.width() * 10), 50),
    'height' : Math.max(element.width() * 10), 50)
});

在缩小div时，只需检查宽度是否已小于1。如果你想保持比例，也要增加高度限制

我正在添加另一个解决方案

使用float:0.1将无法获得精确的返回值。因为您使用的是十进制数字，所以浏览器对舍入的处理方式不同。例如，IE在CSS中对JS计算的浮点仅使用两位小数的精度。其他浏览器将使用三位小数，但它们将决定结果是按原样使用还是更改，例如FF可能会将计算出的13.205转换为已使用的13.207

最好是你自己决定固定的硬编码范围。或者在你回去时记住新计算的宽度和高度，并在回去时应用它们。我想这需要构建两个阵列，一个用于较小的阵列，一个用于较大的阵列。否则，请转到画布或svg。
只需检查它是否仍在某个合理的边界内，可能如下所示：

'width' : ( element.width() > 0.1 ? element.width() * 0.1 : element.width() )
'height' : ( element.height() > 0.1 ? element.height() * 0.1 : element.height() )

这样它实际上可以变得非常小。但您应该问问自己，哪个显示器能够显示0.25大小的像素？至少有人可以假设苹果的视网膜显示器能够显示0.5像素。

防止其达到0的一种方法是调整高度和宽度，检查是否为0，然后如果它确实变为0，则重新调整回缓存的值

var w = element.width();
element.width(w*0.1);
var testWidth = element.width();
element.width(w);

if(testWidth == 0)return;

var h = element.height();
element.height(h*0.1);
var testHeight = element.height();
element.height(h);

if(testHeight == 0)return;

事实证明，我要回答我自己的问题。我感谢所有的帮助。我确信我没有从你们那里找到答案的原因是因为我没有正确表达问题，也没有给出足够的细节。无论如何，这就是我问题的解决方案：

我最初在css中将我所有的div缩小了1000倍。这意味着，div（放大时）应该是4879.4px宽，我在css中指定了一个值4。它立刻损失了4个重要数字。我最后做的是将真实值（100%按比例）存储在javascript变量中。这样，当我想要缩放它时，它使用所有有效数字的完整值。我可以上下任意伸缩。如果我把4px宽的div缩小10倍，它就完全消失了，但当我再放大时，它又回来了

再一次，对不起，我问这个问题做得太糟糕了。但我希望这个答案能帮助其他对此感到疑惑的人。
你需要保留纵横比吗？是的，实际上我的div是边界半径为9999999%的圆@Jonathan-很好。然而，我认为这与达到0是一个独立的问题。它是否应该是（element.width（）*10）| | 10？@razzak:取决于您希望它何时启动。我在前面加入了一个变体，与您的评论非常相似，只是在不同的地方。：-）+1-关于使用0作为真实值的冷静观察。尽管如此，0返回的原因是因为它是从javascript设置的，随着宽度变得非常小，精度会降低。也许
0.1
会比1更好地保留一些“小特性”。@Steve-事实并非如此。在变为0之前，大小达到“0.0093749999999994px”。好的，我知道你要去哪里了。这里有更多的信息来解释为什么这不能完全解决我的问题：我的div实际上是代表行星直径的圆。我需要这些是准确的！如果我单击较小的按钮5次，我希望能够单击较大的按钮5次，并使其返回到最初的确切直径。你的方法不行that@Travis：谢谢！我会考虑<代码> 0.1版/代码>，但是我的答案更多的是为了演示如何，我不确定OP对于“小”的维护到底想要什么，所以我将留给他根据需要进行调整。史蒂夫：问题可能出在CSS上，但我不知道如何在不使用JavaScript的情况下解决这个问题。@wetjosh：那么你真的需要在问题中添加这些信息。你能解释一下这是怎么回事吗？如果宽度等于0或小于50，那么结果将变为50，我认为这是您需要查看css属性的默认值+
'width' : ( element.width() > 0.1 ? element.width() * 0.1 : element.width() )
'height' : ( element.height() > 0.1 ? element.height() * 0.1 : element.height() )

var w = element.width();
element.width(w*0.1);
var testWidth = element.width();
element.width(w);

if(testWidth == 0)return;

var h = element.height();
element.height(h*0.1);
var testHeight = element.height();
element.height(h);

if(testHeight == 0)return;