JavaScript中的+=操作符使用不当导致递增错误
<p>我有一个div，我试图将文本淡入其中。</p>
<p>
<pre class="brush:js;toolbar:false;">function fadeIn(divNum) {
let id = null;
fadeDiv = document.getElementById("jsTest");
fadeDiv.innerHTML = "";
console.log(fadeDiv.style.opacity);
if (divNum == 1) {
fadeDiv.innerHTML = "一些文本";
} else if (divNum == 2 ) {
fadeDiv.innerHTML = "一些不同的文本";
} else if (divNum == 3) {
fadeDiv.innerHTML = "仍然不同的文本";
} else {
fadeDiv.innerHTML = "糟糕！这不应该发生";
}
clearInterval(id);
id = setInterval(moveIt,100);
function moveIt() {
if (fadeDiv.style.opacity == 1) {
clearInterval(id);
} else {
fadeDiv.style.opacity += 0.1;
console.log(fadeDiv.style.opacity);
}
}
}</pre>
<pre class="brush:html;toolbar:false;"><div style="opacity: 0;" id="jsTest"></div>
<button class="boxButtonsb" onmouseover="fadeIn(1)">JavaScript测试</button></pre>
</p>
<p>当我鼠标悬停时，不透明度只减少了<code>.1</code>，看起来就像是永远循环在那里。控制台日志显示无尽的<code>0.1</code>条目。</p>
<p>但是，如果我反过来，所以初始不透明度为1，div中有文本开始，并且我设置<code>fadeIn</code>实际上是通过使用<code>fadeDiv.style.opacity == 0</code>作为<code>clearInterfal(id)</code>的if语句检查，并通过<code>-= 0.1</code>递减<code>fadeDiv.style.opacity</code>，它就能正常工作。</p>
<p>我完全不知道为什么递减是正确的，而递增不是。</p>
2
922
收藏
CSS属性始终是字符串，而不是数字。你的代码执行了
'0.1' + 0.1，结果是'0.10.1'，这不是一个有效的数字，所以可能被截断回到0.1。改变它的一种方法是将结果解析为数字。
if (parseFloat(fadeDiv.style.opacity) == 1) { clearInterval(id); } else { fadeDiv.style.opacity = parseFloat(fadeDiv.style.opacity) + 0.1; console.log(fadeDiv.style.opacity); }HTMLELement::style包含字符串值，需要转换为浮点数：function fadeIn(divNum) { let id = null; fadeDiv = document.getElementById("jsTest"); fadeDiv.innerHTML = ""; console.log(fadeDiv.style.opacity); if (divNum == 1) { fadeDiv.innerHTML = "一些文本"; } else if (divNum == 2 ) { fadeDiv.innerHTML = "一些不同的文本"; } else if (divNum == 3) { fadeDiv.innerHTML = "仍然不同的文本"; } else { fadeDiv.innerHTML = "哎呀！这不应该发生的"; } clearInterval(id); id = setInterval(moveIt,100); function moveIt() { if (fadeDiv.style.opacity == 1) { clearInterval(id); } else { fadeDiv.style.opacity = +fadeDiv.style.opacity + .1; console.log(fadeDiv.style.opacity); } } }