1

我试图让图像不断淡出和淡入，以使其“闪烁”。我使用两个 while 循环来更改元素的不透明度属性。循环将不透明度更改 10%，并等待 10 毫秒。第一个循环工作正常，迭代 10 次并继续前进，但第二个循环只改变一次不透明度，然后无限迭代而不影响不透明度。有谁知道出了什么问题以及如何解决？

async function blink(){
    var arrow = document.getElementById('downArrow');
    arrow.style.opacity = 1;
    while(window.getComputedStyle(arrow).opacity>0){
        arrow.style.opacity -= 0.1;
        await sleep(10);
        console.log('first loop');
    }
    while(window.getComputedStyle(arrow).opacity<=1){
        arrow.style.opacity += 0.1;
        await sleep(10);
        console.log('second loop');

    }
    blink();
}


function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
4

1 回答 1

0

你已经遇到了 JavaScript 的奇怪部分；）

arrow.style.opacity返回一个字符串。

当您从字符串中减去一个数字时，JS 会将两个操作数都转换为一个数字，因此 ex"1" - 0.1将返回 number 0.9：

console.log("1" - 0.1);

但是，如果您尝试向字符串添加内容，JS 会将两个操作数都转换为字符串，因此 ex"0.1" + 0.1将返回"0.10.1". 这正是您的代码中发生的事情。

console.log("0.1" + 0.1);

要解决此问题，您需要在opacity向其添加另一个数字之前将其转换为数字。

此外，您在第二个循环中有错误的条件，它应该是< 1，而不是<= 1。

看看这个：

async function blink(){
    var arrow = document.getElementById('downArrow');
    arrow.style.opacity = 1;
    while(window.getComputedStyle(arrow).opacity > 0){
        arrow.style.opacity -= 0.1;
        await sleep(10);
        console.log('first loop', arrow.style.opacity);
    }
    
    while(window.getComputedStyle(arrow).opacity < 1){ // Here, `< 1`
        arrow.style.opacity = +arrow.style.opacity + 0.1; // Here, `+arrow.style.opacity` converts it to a number
        await sleep(10);
        console.log('second loop', arrow.style.opacity);

    }
    blink();
}


function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

blink();
<div id="downArrow" style="width: 100px; height: 100px; background: red;"></div>

于 2019-11-23T16:15:30.603 回答