使用setTimeout制作简单透明度渐变动画

最新推荐文章于 2024-03-21 11:31:49 发布

xiongqisong

最新推荐文章于 2024-03-21 11:31:49 发布

阅读量1.3k

点赞数

分类专栏： js学习

本文链接：https://blog.csdn.net/xiongqisong/article/details/53439135

版权

js学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

setTimeout(code,millisec)
执行：millisec毫秒后，调用一次code
返回：一个id，该值标识要延迟执行code的任务的id
clearTimeout(id)
执行：结束延迟执行code的任务。id必须是setTimeout返回的id
例子：

var t = setTimeout("alert('hello')",100);
alert("no hello");
clearTimeout(t);
//只要有clearTimeout(t)则设置好的延时代码一定不会执行
//即使设置的延时时间为100ms，很短，但是由于在同一个代码段内，只有t所在的代码段内的其他代码执行完毕后，才会延迟100ms执行alert('hello')

setInterval(code,millisec)
执行：每过millisec毫秒，调用一次code
返回：一个id，该值标识周期执行code的任务的id
clearInterval(id)
执行：结束周期执行code的任务。id必须是setInterval返回的id
例子：

function a(){
    return setInterval("console.log('hello')",1000);
}
function b(t){
    clearInterval(t);
}
//调用a函数将每隔1秒打印一次hello，调用b函数将停止打印
var t = a();
b(t);

注：code、millisec未用”[]”括起来，表示该参数是必须的。
在调用setInterval或者setTimeout时，其实是创建了一个“定时器任务”对象obj，由于这个对象是匿名的，所以var t = obj，这样一来我们就可以操纵这个对象了，我把它简称为“任务”。一定要注意保存好任务对象，以便我们终止任务的运行。

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title></title>
  </head>
  <body>
    <h2>div的opacity从1开始，每一秒降低0.2，当opacity&lt;=0时，在500ms后将div的opacity
      重置为1</h2>
    <div id="t1" style="width:200px;height:200px;background:red;opacity:1"></div>
    <script>
      var player = function(id){      
        this.d = document.getElementById(id);
        this.timerAnim = null;//定时器指针
        this.defOpacity = 1;//默认透明度
        this.tmpOpacity = 1;//临时透明度
        this.animSpeed = 0.2;//透明度变化速度
        this.init();//初始化工作
      }
      player.prototype = {
        test:function(){
          if(this.timerAnim){
            window.clearTimeout(this.timerAnim);//清空定时器指针
          }
          if(this.tmpOpacity <=0){
            this.tmpOpacity = this.defOpacity;//透明度为0时，重新从1开始
            this.d.style.opacity = this.tmpOpacity;
            i = window.setTimeout(this.test.bind(this),500);
            return;
          }
          this.d.style.opacity = this.tmpOpacity = this.tmpOpacity - this.animSpeed;
          i = window.setTimeout(this.test.bind(this),1000);//bind用来绑定函数到对象上
            },
        init:function(){
            this.test.call(this);//例子：funA.call(obj)    其中call()用来调用函数，this指向obj
        }
      }
      var player = new player('t1');
    </script>
  </body>
</html>