-1

我想通过单击按钮将 div 的不透明度从 0 增加到 1.0。我可以将不透明度从 1.0 降低到 0.0，但它不能从 0.0 降低到 1.0。我也尝试过使用parseInt(element.style.opacity)and 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() 对其进行测试。我认为这是您的主要问题之一；parseFloat() 是正确的使用方法，您只需要相应地检查您的返回值。

于 2012-10-02T23:36:39.647 回答