小练习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. leetcode-812-Largest Triangle Area

    题目描述: You have a list of points in the plane. Return the area of the largest triangle that can be fo ...

  2. Bi-shoe and Phi-shoe(欧拉筛)

    Bamboo Pole-vault is a massively popular sport in Xzhiland. And Master Phi-shoe is a very popular co ...

  3. Q481 神奇字符串

    神奇的字符串 S 只包含 '1' 和 '2',并遵守以下规则: 字符串 S 是神奇的,因为串联字符 '1' 和 '2' 的连续出现次数会生成字符串 S 本身. 字符串 S 的前几个元素如下:S = & ...

  4. vue 之bug<1> Warn : [vue-router] Duplicate named routes definition:

    原因:定义重复的路由名称. 我有3个不同的(父级)vue文件分别配置了3个相同的(子级)vue文件,配置路由的js文件里子集路由的name重复了. 解决方案: 一天一个小Bug

  5. 使用 Dotfuscator 对代码进行混淆

    Dotfuscator 简介 作为一种高级语言,c# 类库很容易被 .NET Reflector 这样的工具反编译.攻击者很容易从代码中找到数据库连接方式,加解密方法等重要信息.使用 dnspy 这样 ...

  6. 1、The Fctory Pattern（工厂模式：解决对象创建问题）

    The Fctory Pattern  处理对象创建,客户端可以申请一个对象而不用知道对象被那个class创建.可以方便地解耦对象的使用和创建,有两种实现,工厂方法和抽象工厂. Method(工厂方法 ...

  7. 集合 相关 深浅copy

    '' 集合:可变的数据类型,他里面的元素必须是不可变的数据类型,无序,不重复. {} ''' # set1 = set({1,2,3}) # set2 = {1,2,3,[2,3],{'name':' ...

  8. JS之作用域与闭包

    JS之作用域与闭包   作用域在JS中同样也是一个重要的概念.它不复杂,因为ES5中只有全局作用域和函数作用域,我们都知道他没有块级作用域.但在ES6中多了一个let,他可以保证外层块不受内层块的影响 ...

  9. 关于 vertical-align 的一些小知识

    引子 在日常开发过程中,我们经常会遇到如下的场景,一行中既有图片也有文字,而且图片还要和文字对齐.效果如下: 通常代码如下: <!DOCTYPE html> <html> &l ...

  10. Java TCP/IP与HTTP协议个人总结(原创)

    首先举个例子方便理解: 1.应用层(http.ftp)就类似:淘宝.京东.易购等网购网站,主要用来负责选择购买商品(制定协议). 2.传输层(TCP.UDP)就类似:中通.申通等物流公司,主要负责传送 ...