JS之setTimeOut與clearTimeOut

本文轉載自查看原文 2018-11-30 23:35 1441 JavaScript

小練習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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js中setTimeout和clearTimeout的使用 setTimeout()與clearTimeout() js-定時任務setInterval，setTimeout，clearInterval，clearTimeout Window clearTimeout() 方法與setTimeout 我之理解---計時器setTimeout 和clearTimeout 關於js里cleartimeout的疑惑關閉定時器(setTimeout/clearTimeout|setInterval/clearInterval) JavaScript 計時事件-setInterval()-clearInterval() -setTimeout()-clearTimeout() vue中setTimeout之前一定要 clearTimeout 否則將失效 nodejs中的全局函數setTimeout/clearTimeout,setInterval/clearInterval,unref/ref