Javascript在while循环中改变不透明度不起作用答案

【问题标题】：Javascript changing opacity in a while loop not workingJavascript在while循环中改变不透明度不起作用
【发布时间】：2019-11-24 00:15:30
【问题描述】：

我正在尝试使图像不断淡出和淡入，以使其“闪烁”。我使用两个 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));
}

【问题讨论】：

你不需要 JS。您可以简单地使用 css - stackoverflow.com/questions/33667143/…
谢谢，这非常有用，为了简单起见，我可能最终会使用它。我仍然想知道为什么我的功能无法正常工作。

标签： javascript css

【解决方案1】：

您已经遇到过 JavaScript 的奇怪部分；）

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

当你从一个字符串中减去一个数字时，JS 会将两个操作数都转换为一个数字，所以 e.x "1" - 0.1 将返回数字 0.9：

console.log("1" - 0.1);

但是，如果您尝试向字符串添加内容，JS 会将两个操作数都转换为字符串，例如"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();

&lt;div id="downArrow" style="width: 100px; height: 100px; background: red;"&gt;&lt;/div&gt;

【讨论】：