當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS之setTimeOut与clearTimeOut

發(fā)布時(shí)間：2023/12/2 javascript 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS之setTimeOut与clearTimeOut 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

小練習(xí)1：針對(duì)HTML，分別使用 setTimeout 和 setInterval 實(shí)現(xiàn)以下功能：

點(diǎn)擊按鈕時(shí)，開始改變 fade-obj 的透明度，開始一個(gè)淡出（逐漸消失）動(dòng)畫，直到透明度為0
在動(dòng)畫過程中，按鈕的狀態(tài)變?yōu)椴豢牲c(diǎn)擊
在動(dòng)畫結(jié)束后，按鈕狀態(tài)恢復(fù)，且文字變成“淡入”
在按鈕顯示淡入的狀態(tài)時(shí)，點(diǎn)擊按鈕，開始一個(gè)“淡入”（逐漸出現(xiàn)）的動(dòng)畫，和上面類似按鈕不可點(diǎn)，直到透明度完全不透明
淡入動(dòng)畫結(jié)束后，按鈕文字變?yōu)椤暗觥?/li>
暫時(shí)不要使用 CSS animation （以后我們?cè)賹W(xué)習(xí)）

<!DOCTYPE html> <html> <head><meta charset="utf-8" /><title>與頁面對(duì)話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>

更多專業(yè)前端知識(shí)，請(qǐng)上【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的JS之setTimeOut与clearTimeOut的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： js中字符串和数组的使用
下一篇： JS原生方法实现jQuery的ready