JS之setTimeOut与clearTimeOut

最新推荐文章于 2024-05-29 15:14:06 发布

转载最新推荐文章于 2024-05-29 15:14:06 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Joe-and-Joan/p/10047384.html

本文介绍如何使用HTML和JavaScript实现元素的淡入淡出效果。通过改变元素的透明度，利用setTimeout函数控制动画过程，按钮状态在动画中不可点击，并在动画结束后自动切换为相反的淡入或淡出状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小练习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>

转载于:https://www.cnblogs.com/Joe-and-Joan/p/10047384.html