如何防止值舍入为零 javascript

How to prevent values from rounding to zero javascript

本文关键字：javascript 舍入 何防止      更新时间：2023-09-26

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

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

此外，可能没有必要能够无限次地使div 变小或变大。限制它的标准方法是什么？参考我的jsfiddle，了解我想要实现的目标。http://jsfiddle.net/dfjosh/vtxeD/12/

.HTML

<a href="javascript:;" class="smaller">smaller</a>
<a href="javascript:;" class="larger">larger</a>
<div></div>

.CSS

div {
    width: 50px;
    height: 50px;
    background: cornflowerblue;
}

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
        });
    }
});

鉴于0的计算结果为 'falsey'(或 false-ish(，您可以使用 || 运算符在 width() 或 height() 返回0时传递1：

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

JS小提琴演示。

在我看来

，问题不在于div归零，而在于让他们再次摆脱它。

这很容易做到：

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

工作原理：如果element.width()返回0，当然0 * 10也是0。 0是一个假值，因此||改用1。

或者，如果您愿意：

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

。这只会更快地发挥作用。:-)

更多： JavaScript's Curiously Powerful OR 运算符 ( || (

在

缩小div 时，您只需检查宽度是否低于 1。如果您想保持比率，也可以添加高度限制。

我在这里添加另一个解决方案。

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

最好是自己决定固定的硬编码范围。或者随时记住新计算的宽度和高度，并在返回时应用它们。我想这将涉及构建两个阵列，一个用于较小的阵列，一个用于较大的阵列。否则转向画布或 svg。

我认为这就是您要查找的：

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

只需检查它是否仍在某个合理的边界中，也许是这样的：

'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像素。

jsFiddle Demo

防止它达到 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.4 像素宽，我在 css 中分配了值 4。它立即失去了 4 个重要数字。我最终所做的是将真实(100%缩放(值存储在javascript变量中。这样，当我想缩放它时，它使用所有有效数字的完整值。我可以随心所欲地向下和向上扩展。如果我将 4px 宽的div 缩小 10 倍，它理所当然地消失了，但当我缩小时会立即回来。

再次，对不起，我问这个问题做得很糟糕。但我希望这个答案可以帮助其他想知道这一点的人。

相关文章：