当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS之setTimeOut与clearTimeOut

JS之setTimeOut与clearTimeOut

2018年12月01日  | 移动技术网IT编程  | 我要评论

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

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网