-1

ボタンをクリックするだけで、divの不透明度を0から1.0に上げたいと思いました。不透明度を1.0から0.0に下げることはできますが、0.0から1.0にすると機能しません。とも使ってみparseInt(element.style.opacity)ましparseFloat(element.style.opacity)たが、どれもうまくいきません。欠陥のあるJavaScriptは次のとおりです。

function myF(){
var x = document.getElementById("test").style; 
x.opacity = parseFloat(x.opacity) + 0.1;
setTimeout(myF(),10);
}

そして、これが欠陥のあるHTMLです：

<button onclick="myF()">Click to change opacity</button>
<div style="height:200px; width:200px; background-color:#656b67; opacity:0;" id="test">     </div>

（以下は、不透明度を下げるために機能するjavascriptとHTMLです）

<body>
<script>
function myF(){
    var x = document.getElementById("test").style;
    x.opacity = x.opacity - 0.1;
    setTimeout(function(){myF();},10);
}
</script>
<button onclick="myF()">Click to resize</button>
<div style="height:200px; width:200px; background-color:#656b67; opacity:1.0;"     id="test"></div>
</body>
4

2 に答える 2

1

変化する

setTimeout(myF(),10);

に

setTimeout(myF, 10);

関数をすぐに呼び出すのではなく、に渡しますsetTimeout。

また、無限ループがあります。関数は再帰的に呼び出され、終了条件はありません。すぐに呼び出すと、ブラウザがフリーズします。

于 2012-10-02T22:55:18.497 に答える
1 
function myF(){
  var transparent_div = document.getElementById("test");

  var opacity = parseFloat(transparent_div.style.opacity);

  if (isNaN(opacity)) opacity = 0.1;
  else opacity += 0.1;

  transparent_div.style.opacity = opacity;

  if (opacity < 1.0) setTimeout(function(){myF();},100);
}

不透明度が空の文字列""に設定されている場合、数値を解析することはありません。そのため、JavascriptはそれをNaNオブジェクトとして返し、isNaN（）を使用してテストできます。それがあなたの主な問題の1つだと思います。parseFloat（）を使用するのが正しいので、それに応じて戻り値を確認する必要があります。

于 2012-10-02T23:36:39.647 に答える