定時器

for瞬間完成，沒有時間依據(jù)

 for(var i=0;i<100;i++){
        console.log(i);
    }

var timer=setInterval(函數(shù)，毫秒); 重復執(zhí)行
clearInterval(timer); 清空定時器

var timer=setTimeout(函數(shù)，毫秒); 執(zhí)行一次 (像炸彈一樣執(zhí)行一次)
clearInterval(timer);

var i=0;
    var timer=null;
    function a(){
        document.title=i++;
        if(i==6){
            clearInterval(timer);
        }
    }
    timer= setInterval(a,1000);

廣告效果

window.onload= function () {
          //找到圖片
          var oimg=document.getElementById('oimg');
          //2s之后圖片顯示并且居中
         setTimeout(function () {
            oimg.style.display='inline-block';
             //2s之后消失
            setTimeout(function () {
                oimg.style.display='none';
            },2000)
         },2000)
      };

替換背景

var sum=0;
var timer=null;
var begin=document.getElementById('begin');
var stop=document.getElementById('stop');
function fnbg(){
    var bg=['1.jpg','2.jpg','3.jpg'];
    document.body.style.background='url('+bg[sum]+')';
    console.log(document.body.style.background);
    sum++;
    sum%=bg.length;
}
begin.onclick= function () {
  timer=setInterval(fnbg,1000);
};
stop.onclick= function () {
    clearInterval(timer);
}

仿qq，移入移出

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
      #qq{
          width: 200px;
          height: 400px;
          background: #eee;
      }
        #title{
            width: 240px;
            height: 180px;
            background: yellow;
            position: absolute;
            left: 210px;
            top: 0;
            display: none;
        }
    </style>
    <script>
            window.onload= function () {
                var qq=document.getElementById('qq');
                var title=document.getElementById('title');
                var timer=null;
                qq.onmouseover= function () {
                   title.style.display='block';
                };
                qq.onmouseout= function () {
                     timer=setTimeout(function () {
                        title.style.display='none';
                    },200)
                };
                title.onmouseover= function () {
                      clearInterval(timer);
                      title.style.display='block';
                };
                title.onmouseout= function () {
                    title.style.display='none';
                };
            };
    </script>
</head>
<body>
<div id="qq"></div>
<div id="title"></div>
</body>
</html>

往前走

 window.onload= function () {
             var btn=document.getElementById('btn');
             var div1=document.getElementById('div1');
             btn.onclick= function () {
                 clearInterval(div1.timer);
                 div1.timer=setInterval(function () {
                     var speed=parseInt(getStyle(div1,'left'))+2;
                     if(speed>800){
                         speed=800;
                     }
                     div1.style.left=speed+'px';
                     if(speed==800){
                         clearInterval(div1.timer);
                     }
                 },30)
             };
             function getStyle(obj,attr){
                 if(obj.currentStyle){
                     return obj.currentStyle[attr];
                 }else{
                     return getComputedStyle(obj)[attr];
                 }
             }
         };

往前往后走

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
         #div1{
             width: 100px;
             height: 100px;
             position: absolute;
             left: 0;
             top: 60px;
             background: red;
         }
    </style>
    <script>
         window.onload= function () {
             var btn=document.getElementById('pre');
             var hou=document.getElementById('hou');
             var div1=document.getElementById('div1');
             btn.onclick= function () {
                 clearInterval(div1.timer);
                 div1.timer=setInterval(function () {
                     var speed=parseInt(getStyle(div1,'left'))+12;
                     if(speed>800){
                         speed=800;
                     }
                     div1.style.left=speed+'px';
                     if(speed==800){
                         clearInterval(div1.timer);
                     }
                 },30)
             };
             hou.onclick= function () {
                 clearInterval(div1.timer);
                 div1.timer=setInterval(function () {
                     var speed=parseInt(getStyle(div1,'left'))+-12;
                     if(speed<10){
                         speed=10;
                     }
                     div1.style.left=speed+'px';
                     if(speed==10){
                         clearInterval(div1.timer);
                     }
                 },30)
             };
             function getStyle(obj,attr){
                 if(obj.currentStyle){
                     return obj.currentStyle[attr];
                 }else{
                     return getComputedStyle(obj)[attr];
                 }
             }
         };
    </script>
</head>
<body>
<input type="button" value="往前" id="pre"/>
<input type="button" value="往后" id="hou"/>
<div id="div1"></div>
</body>
</html>

封裝一下函數(shù)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
         #div1{
             width: 100px;
             height: 100px;
             position: absolute;
             left: 0;
             top: 60px;
             background: red;
         }
    </style>
    <script>
         window.onload= function () {
             var btn=document.getElementById('pre');
             var hou=document.getElementById('hou');
             var div1=document.getElementById('div1');
             btn.onclick= function () {
                 fnmove(div1,12,800);
             };
             hou.onclick= function () {
                 fnmove(div1,-12,10);
             };
             function fnmove(obj,dir,target){
                 clearInterval(obj.timer);
                 obj.timer=setInterval(function () {
                     var speed=parseInt(getStyle(obj,'left'))+dir;
                     console.log(speed);
                     if(speed>target && dir>0){
                         speed=target;
                     }
                     if(speed<target && dir<0){
                         speed=target;
                     }
                     obj.style.left=speed+'px';
                     if(speed==target){
                         clearInterval(obj.timer);
                     }
                 },30)
             }
             function getStyle(obj,attr){
                 if(obj.currentStyle){
                     return obj.currentStyle[attr];
                 }else{
                     return getComputedStyle(obj)[attr];
                 }
             }
         };
    </script>
</head>
<body>
<input type="button" value="往前" id="pre"/>
<input type="button" value="往后" id="hou"/>
<div id="div1"></div>
</body>
</html>

上下左右走

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
         #div1{
             width: 100px;
             height: 100px;
             position: absolute;
             left: 0;
             top: 60px;
             background: red;
         }
    </style>
    <script>
         window.onload= function () {
             var btn=document.getElementById('pre');
             var hou=document.getElementById('hou');
             var div1=document.getElementById('div1');
             var shang=document.getElementById('shang');
             var xia=document.getElementById('xia');
             btn.onclick= function () {
                 fnmove(div1,'left',12,800);
             };
             hou.onclick= function () {
                 fnmove(div1,'left',-12,10);
             };
             shang.onclick= function () {
                 fnmove(div1,'top',-12,60);
             };
             xia.onclick= function () {
                 fnmove(div1,'top',12,500);
             };
             function fnmove(obj,attr,dir,target){
                 clearInterval(obj.timer);
                 obj.timer=setInterval(function () {
                     var speed=parseInt(getStyle(obj,attr))+dir;

                     if(speed>target && dir>0){
                         speed=target;
                     }
                     if(speed<target && dir<0){
                         speed=target;
                     }
                     obj.style[attr]=speed+'px';
                     if(speed==target){
                         clearInterval(obj.timer);
                     }
                 },30)
             }
             function getStyle(obj,attr){
                 if(obj.currentStyle){
                     return obj.currentStyle[attr];
                 }else{
                     return getComputedStyle(obj)[attr];
                 }
             }
         };
    </script>
</head>
<body>
<input type="button" value="往前" id="pre"/>
<input type="button" value="往后" id="hou"/>
<input type="button" value="往上" id="shang"/>
<input type="button" value="往下" id="xia"/>
<div id="div1"></div>
</body>
</html>

回調(diào)函數(shù)順時針走

<!DOCTYPE html>
<html id="aaaa">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #odiv{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 50px;
        }
    </style>
    <script>
        window.onload= function () {
            var  btn=document.getElementById('btn');
            var odiv=document.getElementById('odiv');
            btn.onclick= function () {
              domove(odiv,'left',20,500, function () {
                   domove(odiv,'top',20,500, function () {
                       domove(odiv,'left',20,0, function () {
                           domove(odiv,'top',20,50);
                       })
                   })
              });
            };

            function domove(obj,attr,dir,itarget,fn){
                dir=parseInt(getStyle(obj,attr))<itarget?dir:-dir;
                clearInterval( obj.timer);
                obj.timer=setInterval(function () {
                    var speed=parseInt(getStyle(obj,attr))+dir;
                    if(speed>itarget && dir>0){
                        speed=itarget;
                    }
                    if(speed<itarget && dir<0){
                        speed=itarget;
                    }
                    obj.style[attr]=speed+'px';
                    if(speed==itarget){
                        clearInterval(obj.timer);
                        if(fn){
                            fn();
                        }
                    }
                },30)
            }
            function getStyle(obj,attr){
               if(obj.currentStyle){
                   return obj.currentStyle[attr];
               }else{
                   return getComputedStyle(obj)[attr];
               }
            }
        };
    </script>
</head>
<body>
<input type="button" value="走" id="btn"/>
<div id="odiv"></div>
</body>
</html>

一串div往上往下走

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .a{
            width: 50px;
            height: 50px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>

<script>
    var str='';
    var timer=null;
    var num=0;
    var len=20;
    var bTrue=true;
    var odiv=document.getElementsByTagName('div');
    for(var i=0;i<len;i++){
        str+='<div class="a" style="left:'+i*60+'px"></div>';
    }
    document.body.innerHTML=str;

    document.onclick= function () {
       if(bTrue){
         toxia();
       }else{
           toshang();
       }
    };
    function toxia(){
        clearInterval(timer);
        timer=setInterval(function () {
            domove(odiv[num],20,500,'top');
            num++;
            if(num==len){
                clearInterval(timer);
                bTrue=false;
            }
        },60)
    }
    function toshang(){
        clearInterval(timer);
        timer=setInterval(function () {
            num--;
            domove(odiv[num],20,0,'top');
            if(num==0){
                clearInterval(timer);
                bTrue=true;
            }
        },60)
    }

    function domove(obj,dir,itarget,attr,fn){
        dir=parseInt(getByClass(obj,attr))<itarget?dir:-dir;
        clearInterval(obj.timer);
        obj.timer=setInterval(function () {
            var speed=parseInt(getByClass(obj,attr))+dir;
            if(speed>=itarget && dir>0){
                speed=itarget;
            }
            if(speed<=itarget && dir<0){
                speed=itarget;
            }
            obj.style[attr]=speed+'px';
            if(speed==itarget){
                clearInterval(obj.timer);
                if(fn){
                    fn();
                }
            }
        },30);
    }
    function getByClass(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else{
            return getComputedStyle(obj)[attr];
        }
    }

</script>
</body>
</html>

圖片抖動

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #oimg{
            width: 200px;
            position: absolute;
            left: 200px;
            top: 200px;
        }
        #oimg1{
            width: 200px;
            position: absolute;
            left: 500px;
            top: 200px;
        }
    </style>
    <script>
       window.onload= function () {
           var oimg=document.getElementById('oimg');
           var oimg1=document.getElementById('oimg1');

           oimg.onclick=fn;
           oimg1.onclick=fn;

           function  fn() {
               var _this=this;
               getDou( _this,'top', function () {
                   getDou(_this,'left');
               });
           }

           function getDou(obj,attr,fn){
               var arr=[];
               var num=0;
               var len=20;
               for(var i=len;i>=0;i-=2){
                   arr.push(i,-i);
               }
               clearInterval(obj.timer);
               obj.timer=setInterval(function () {
                   obj.style[attr]=parseInt(getByClass(obj,attr))+arr[num]+'px';
                   num++;
                   if(num==len){
                       clearInterval(obj.timer);
                       if(fn){
                           fn();
                       }
                   }
               },30);
           }
           function getByClass(obj,attr){
               if(obj.currentStyle){
                   return obj.currentStyle[attr];
               }else{
                   return getComputedStyle(obj)[attr];
               }
           }
       };
    </script>
</head>
<body>
![](1.jpg)
![](2.jpg)

</body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 閉包 定義「一個函數(shù)」+「訪問到的外部變量」= 閉包 作用創(chuàng)建內(nèi)部變量，既不能被外部隨意修改，又可以通過指定的函數(shù)...
    jrg_memo閱讀 620評論 0贊 0
  • 定時器 JavaScript提供定時執(zhí)行代碼的功能，叫做定時器（timer），主要由setTimeout()和se...
    徐國軍_plus閱讀 257評論 0贊 0
  • JavaScript提供定時執(zhí)行代碼的功能，叫做定時器（timer），主要由setTimeout()和setInt...
    PYFang閱讀 268評論 0贊 0
  • 清風明月一字心， 茅屋貪貧四余子。 鄰家旁親六福臨， 子不知子十路齊。 晨月不黎百星立， 誰知吾心千里溪。
    零慢慢走閱讀 313評論 0贊 0
  • 蔣勛老師的《吳哥窟之美》講座，一共八個視頻，四個主題——建國、鼎盛、領悟、幻滅，從建筑美學和歷史方面介紹了吳哥從萌...
    火瓏果閱讀 1,444評論 2贊 2

友情鏈接更多精彩內(nèi)容