Question

我想用setInterval：

更改表的不透明度

    window.setInterval(function () {
        if (document.getElementById("goalkeepers").style.opacity != 1)
            document.getElementById("goalkeepers").style.opacity = document.getElementById("goalkeepers").style.opacity + 0.001;
    }, 1);

当我运行此代码时，它只执行一次，表的不透明度仅为0.001。有什么问题？

Answer 1

代码本身有几个问题：

DRY，您正在呼叫getElementById以获得相同的元素。
您假设0.001 + 0.001 + 0.001 + ...一千次将恰好合计1.计算机中不存在这种情况，因为浮点数的工作原理。您应该使用< 1代替!= 1
检索样式始终是一个字符串。因此，结果是尝试0.0010.001，即。串联。
您使用的是1ms的间隔。间隔通常不应小于约20。

尝试：

var tbl = document.getElementById('goalkeepers');
tbl.style.opacity = 0;
tbl.style.transition = "opacity 1s linear";
setTimeout(function() {
    // delay the actual opacity setting so it will be transitioned
    tbl.style.opacity = 1;
},10);

Answer 2

这些家伙在我fiddle期间打败了我，但我还是会发帖。

var gk = document.getElementById("goalkeepers"),
    animation = window.setInterval(function () {
        if (gk.style.opacity < 1) {
            gk.style.opacity = Number(gk.style.opacity) + 0.001;
        }
        else {
            clearInterval(animation);
        }
    }, 1);

对于使用<而不是!=进行浮动类型比较，字符串值为style.xxx并仅调用document.getElementById一次，它们都是正确的。

你应该考虑除了他们的一个答案。

Answer 3

试试这个

var t= window.setInterval(function () {

if (parseInt(document.getElementById("goalkeepers").style.opacity) != 1)
{
    document.getElementById("goalkeepers").style.opacity = Number(document.getElementById("goalkeepers").style.opacity) + 0.001;
}
else
{
    clearInterval(t);   
}
}, 1);

你的不透明度没有增加，所以使用Number（）你也清除了一旦不透明度达到1时的间隔，否则它将继续调用可能会在一段时间后减慢浏览器的速度。

setInterval响应只有一次而不是1000

3 个答案: