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

JS之setTimeOut与clearTimeOut的更多相关文章

  1. node.js之setTimeout()、clearTimeout()与 setInterval()与clearInterval()

    1.setTimeout函数与clearTimeout函数 setTimeout(cb,ms,[arg],[...])延时一定时间执行回调函数该函数中cb参数为必填函数,为需要执行的回调函数ms为经过 ...

  2. js中setTimeout和clearTimeout的使用

    setTimeout,延迟n秒后执行指定代码 clearTimeout,清除计时器 <html> <head> <script type="text/javas ...

  3. JS window对象 取消计时器clearTimeout() setTimeout()和clearTimeout()一起使用，停止计时器。 语法: clearTimeout(id_of_setT

    取消计时器clearTimeout() setTimeout()和clearTimeout()一起使用,停止计时器. 语法: clearTimeout(id_of_setTimeout) 参数说明: ...

  4. js中settimeout方法加参数

    js中settimeout方法加参数的使用. 简单使用看w3school  里面没有参数调用,  例子: <script type="text/javascript"> ...

  5. 结合setTimeout和clearTimeout，实现“返回顶部”的功能

    结合setTimeout和clearTimeout,当页面停止滚动时,“返回顶部”按钮淡隐淡出.点击“返回顶部”页面以动画形式返回顶部.完美兼容ie6-11,firefox,chrome等. html ...

  6. javascript的setTimeout()用法总结，js的setTimeout()方法

    引子 js的setTimeout方法用处比较多,通常用在页面刷新了.延迟执行了等等.但是很多javascript新手对setTimeout的用法还是不是很了解.虽然我学习和应用javascript已经 ...

  7. 利用setTimeOut 和clearTimeOut 方法控制写一个 滑动导航显示不同信息的效果

    效果如图鼠标滑动导航  下边显示不同效果 html代码和css格式代码 <body><div id="tab" class="tab"> ...

  8. 浅谈JS之setTimeout与setInterval

    概念 setTimeout与clearTimeout,以及setInterval与clearInterval均属于Window对象方法. 方法 描述 setTimeout 在指定的毫秒数后调用函数或计 ...

  9. js中setTimeout/setInterval定时器用法示例

    js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 functio ...

随机推荐

  1. nginx高性能WEB服务器系列之二命令管理

    nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...

  2. hive join的三种优化方式

    原网址:https://blog.csdn.net/liyaohhh/article/details/50697519 hive在实际的应用过程中,大部份分情况都会涉及到不同的表格的连接, 例如在进行 ...

  3. 基于windows fiber的协程(coroutine)实现

    一个非常简单,但是实用的协程实现,使用Windows的*Fiber函数族(linux可以稍微改一下用*context函数族). fco.h #ifndef _MSC_VER #error " ...

  4. windows使用putty向远程服务器传送文件

    一.问题产生 对于远程服务器,我习惯把文件写好后直接上传到服务器,也有很多方法可以做到,我现在比较习惯使用putty自带的pscp直接去传. 二.解决办法 1.首先在本地下载的putty文件下看是否有 ...

  5. 命令行查看系统中保存的wifi密码

    我们经常遇到一种情况,就是电脑连接了wifi,但是却忘记了密码是多少,而且我们知道电脑肯定有备份,不然下次也无法连接不是,那么我们改如何获取这个密码呢?XP,Win7时代,wifi密码是可以通过网络属 ...

  6. Maven 整合 robot framework 进行测试

    1. 在maven pom.xml中先配置robot framework的plugin: <plugin> <!-- integration test runner (robot-f ...

  7. google浏览器安装不上的绝望经历

    手贱把google的一些文件删除了,整个浏览器都没法打开 决定重装下,但是连卸载的功能都无法打开了 于是决定上网重新下载了个安装包,发现安装包都打不来 很绝望,查了很多资料 很多人说要删除注册表的东西 ...

  8. C语言字符串的操作

    C语言字符串操作函数 1. 字符串反转 - strRev2. 字符串复制 - strcpy3. 字符串转化为整数 - atoi4. 字符串求长 - strlen5. 字符串连接 - strcat6. ...

  9. PZ73H-PZ73X刀闸阀厂家，PZ73H-PZ73X刀闸阀价格 - 专题栏目 - 无极资讯网

    无极资讯网 首页 最新资讯 最新图集 最新标签   搜索 PZ73H-PZ73X刀闸阀 无极资讯网精心为您挑选了(PZ73H-PZ73X刀闸阀)信息,其中包含了(PZ73H-PZ73X刀闸阀)厂家,( ...

  10. Dubbo---初识

    1.概述 1.1 Dubbo是一款高性能.轻量级的java RPC框架: 1.2 Dubbo提供的功能: 面向接口的远程调用: 智能容错.负载均衡: 服务注册.发现: 1.3 Dubbo架构 Prov ...