Question

我正在尝试使用JavaScript减少不透明度。但是问题在于“如果”条件始终为假，因此不透明度变为0。请任何人可以解释为什么这种情况发生以及正确的解决方案。

var opacity = 1;
var decrement = 0.01;
var id = setInterval(frame, 10);
function frame(){
    if (opacity == 0.4) //It is always false..
    {
        clearInterval(id);//Not able to clear Interval
    }
    else
    {
        opacity = opacity-decrement;
        document.getElementsByClassName('menu_bar')[0].style.backgroundColor='rgba(66,64,61,'+opacity+')';
    }
}

Answer 1

 if(Math.abs(opacity - 0.4) < 0.01) {

Floating point math is "broken"，因此您必须容错。

Answer 2

请尝试使用opacity == 0.4或opacity < 0.5，而不是在代码中使用opacity <= 0.4，因为分数在javascript中不是很可靠。

尝试在控制台中运行1-0.1-0.1-0.1-0.1-0.1-0.1（在== 0.4检查之前发生的数学运算应返回true），以了解我的意思。

Answer 3

如上所述，floating point math已损坏。

一个简单的解决方法是使用整数并将最终结果除以100。

这还将避免在每个时间间隔内产生任何多余的Math.abs或calc。

堆栈片段

var opacity = 100;
var decrement = 1;
var id = setInterval(frame, 10);

function frame() {
  if (opacity == 40)
  {
    clearInterval(id);
  } else {
    opacity = opacity - decrement;
    //document.getElementsByClassName('menu_bar')[0].style.backgroundColor='rgba(66,64,61,'+opacity/100+')';
    document.body.style.backgroundColor='rgba(66,64,61,'+opacity/100+')';
  }
}

Answer 4

You can use opacity.toFixed(2) to restrict the decimal digits to 2, this will sole the issue

var opacity = 1;
var decrement = 0.01;
var id = setInterval(frame, 10);
function frame(){
    if (opacity.toFixed(2) == 0.40) //It is always false..
    {
        console.log("Cleared");
        clearInterval(id);//Not able to clear Interval
    }
    else
    {
        opacity = opacity-decrement;
       // document.getElementsByClassName('menu_bar')[0].style.backgroundColor='rgba(66,64,61,'+opacity+')';
    }
}

在这种情况下，如果条件始终为假

4 个答案: