setTimeOut and clearTimeOut of JS

Small exercise 1: for HTML, use setTimeout and setInterval respectively to achieve the following functions:

When clicking the button, the transparency of fade obj will be changed and a fade out (fade out) animation will be started until the transparency is 0
During the animation process, the button status becomes non clickable
At the end of the animation, the button state returns and the text becomes "fade in"
When the button displays the fade in state, click the button to start an animation of "fade in" (gradually appearing). Similar to the above buttons, they cannot be clicked until the transparency is completely opaque
When the fade in animation ends, the button text changes to fade out
Don't use CSS animation for now (let's learn later)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Talk to page 4</title>
</head>
<body>

    <div id="fade-obj" style="width:300px;height:300px;background:#000;opacity: 1;"></div>
    <button id="fade-btn" onclick="beLowOpa()">Fade out</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 = "Fade in";
                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 = "Fade out";
                btn.addEventListener("click", beLowOpa);
            }
        }
    </script>
</body>

</html>

Posted by ryclem on Mon, 02 Dec 2019 20:46:01 -0800

Programmer Group

setTimeOut and clearTimeOut of JS

Hot Keywords