Die unsachgemäße Verwendung des +=-Operators in JavaScript führt zu Inkrementierungsfehlern
P粉178894235
2023-09-02 20:32:58
<p>Ich habe ein Div, in das ich Text einblenden möchte. </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 = "Einige Texte";
} else if (divNum == 2 ) {
fadeDiv.innerHTML = "Ein anderer Text";
} else if (divNum == 3) {
fadeDiv.innerHTML = "Immer noch anderer Text";
} anders {
fadeDiv.innerHTML = „Ups! Das sollte nicht passieren“;
}
clearInterval(id);
id = setInterval(moveIt,100);
Funktion moveIt() {
if (fadeDiv.style.opacity == 1) {
clearInterval(id);
} anders {
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-Test</button></pre>
</p>
<p>Wenn ich den Mauszeiger bewege, verringert sich die Deckkraft nur um <code>.1</code> und es sieht so aus, als würde sie sich dort ewig wiederholen. Das Konsolenprotokoll zeigt endlose <code>0.1</code>-Einträge. </p>
<p> Wenn ich es jedoch umkehre, sodass die anfängliche Deckkraft 1 ist, befindet sich am Anfang Text, und ich setze <code>fadeIn</code> tatsächlich mit <code>fadeDiv.style.opacity == 0</code> geprüft als if-Anweisung für <code>clearInterfal(id)</code> und dekrementiert<code>fadeDiv.style.opacity<</code> Code> und es wird gut funktionieren. </p>
<p>Ich habe absolut keine Ahnung, warum das Dekrementieren richtig ist, das Inkrementieren jedoch nicht. </p>
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); } } }