小练习1：针对HTML，分别使用 setTimeout 和 setInterval 实现以下功能：
- 点击按钮时，开始改变 fade-obj 的透明度，开始一个淡出（逐渐消失）动画，直到透明度为0
- 在动画过程中，按钮的状态变为不可点击
- 在动画结束后，按钮状态恢复，且文字变成“淡入”
- 在 按钮显示 淡入 的状态时，点击按钮，开始一个“淡入”（逐渐出现）的动画，和上面类似按钮不可点，直到透明度完全不透明
- 淡入动画结束后，按钮文字变为“淡出”
- 暂时不要使用 CSS animation （以后我们再学习）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>与页面对话4</title> </head> <body> <div id="fade-obj" style="300px;height:300px;background:#000;opacity: 1;"></div> <button id="fade-btn" onclick="beLowOpa()">淡出</button> <script> var opaCount = 1; var btn= document.getElementById("fade-btn"); function beLowOpa() { btn.disabled = true; opaCount -= 0.05; document.getElementById("fade-obj").style.opacity = opaCount; var t = setTimeout("beLowOpa()", 100); if (opaCount <= 0) { clearTimeout(t); btn.disabled = false; btn.innerHTML = "淡入"; btn.addEventListener("click", beHighOpa); } } function beHighOpa() { btn.disabled = true; opaCount += 0.05; document.getElementById("fade-obj").style.opacity = opaCount; var t = setTimeout("beHighOpa()", 100); if (opaCount >= 1) { clearTimeout(t); btn.disabled = false; btn.innerHTML = "淡出"; btn.addEventListener("click", beLowOpa); } } </script> </body> </html>