Question

我正在网站上工作，我试图以编程方式淡入淡出对象然而，当我运行我的循环时，它只从对象中减去不透明度，当我尝试添加到不透明度时，它对于整个100个循环只保持0.01，但是当它运行100-199时，它每次减去0.01。
我很困惑为什么这样做......

function searched() {
    var count = 0;
    if (srched) {
        return
    } else {

        let runloop = setInterval(function () {
            if (count <= 99) {
                document.getElementById("done").style.opacity += 0.01;
            } else if (count > 99 && count <= 199) {
                document.getElementById("done").style.opacity -= 0.01;
            } else {
                clearInterval(this)
                srched = false;
            }
            count += 1;
        }, 40)

    }

}

html代码是：

<p id = "done" style="opacity: 0; color: #1a5b02;">

循环没有问题，只是添加了不透明度。

Answer 1

问题是+=也可能意味着连接，所以不透明度属性在循环中第一次得到值'0' + '0.01' = '00.01'，这被修正为0.01，但是你得到在下一次迭代中'0.010.01'，这是一个错误。

-=没有问题 - 它不能是字符串操作，所以它只是进行减法。

解决方案：确保不要错误地进行连接。我认为最简短的解决方案是写...opacity -= -0.01;，但我很好奇是否有更短的解决方案;）

Answer 2

您需要使用Number()来添加/减去不透明度，否则它会被视为字符串，因此效果不起作用

var srched=false;
function searched() {
    var count = 0,done=document.getElementById("done");
    if (srched) {
        return
    } else {

        let runloop = setInterval(function () {
            if (count <= 99) {
                done.style.opacity = Number(done.style.opacity)+0.01;
            } else if (count > 99 && count <= 199) {
                done.style.opacity = Number(done.style.opacity)-0.01;
            } else {
                clearInterval(this)
                srched = false;
            }
            count += 1;
        }, 40)

    }

}
searched();

<p id="done">Lorem ipsum doner inut</p>

为什么我的节点风格只会降低而不会增加？

2 个答案: