小練習1：針對HTML，分別使用 setTimeout 和 setInterval 實現以下功能： 點擊按鈕時，開始改變 fade-obj 的透明度，開始一個淡出（逐漸消失）動畫，直到透明度為0 在動畫過程中，按鈕的狀態變為不可點擊 在動畫結束後，按鈕狀態恢復，且文字變成“淡入” 在 按鈕顯示 淡入 ...
小練習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="width: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>
