計(jì)時(shí)器函數(shù) setInterval（）

setInterval()        //計(jì)時(shí)器函數(shù)
setInterval(要執(zhí)行的函數(shù)，執(zhí)行間隔（以毫秒為單位，1000毫秒就是一秒)
setInterval(function(){
   console.log(111)
},1000)

定時(shí)器函數(shù) setTimeout（）

setTimeout()；類似于定時(shí)炸彈，規(guī)定多久以后執(zhí)行一次內(nèi)部的函數(shù)
用法：與setInterval()相同

setTimeout(“函數(shù)”，執(zhí)行時(shí)間)；
setInterval(“函數(shù)”，10)；每隔十秒執(zhí)行一次；
setTimeout(“函數(shù)”，10)；十秒以后執(zhí)行函數(shù)，并且只執(zhí)行一次；

函數(shù)自己調(diào)用自己的過(guò)程，叫做：遞歸調(diào)用；

所以，要記住，遞歸調(diào)用一定要有跳出的條件；

清除計(jì)時(shí)器 clearInterval（）

聲明一個(gè)變量，把計(jì)時(shí)器存起來(lái)，然后，用清除語(yǔ)句：
var a=setInterval (function(){},1);
clearInterval(a); //清除計(jì)時(shí)器

setInterval(function(){},1000);//計(jì)時(shí)器
function fun（）{
    console.log(“a”)
}

setInterval(fun,1000)
setInterval(‘fun()’,1000)

小案例（倒計(jì)時(shí)跳轉(zhuǎn)）

<p id="p">5秒后跳轉(zhuǎn)到百度</p>


<script>
    var p = document.getElementById("p");
    var i = 5;
    setTimeout(fun,1000);
    function fun(){
        i--;
        p.innerHTML = i + "秒后跳轉(zhuǎn)到百度";
        if(i<=0){
            window.location.;
        }else{
            setTimeout(fun,1000)
        }
    }
</script>

小案例（無(wú)縫滾動(dòng)輪播圖）

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #div{
            width: 800px;
            height: 300px;
            position: relative;
            margin: 50px auto;
            border: 5px solid silver;
            overflow: hidden;
        }
        ul{
            list-style: none;
            position: absolute;
            width: 2400px;
        }
        li{
            width: 400px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            font-size: 40px;
            float: left;
        }
        .a1{
            background-color: pink;
        }
        .a2{
            background-color: aqua;
        }
        .a3{
            background-color: blueviolet;
        }
        .a4{
            background-color: yellow;
        }
    </style>

<div id="div">
    <ul id="ul">
        <li class="a1">1</li>
        <li class="a2">2</li>
        <li class="a3">3</li>
        <li class="a4">4</li>
        <li class="a1">1</li>
        <li class="a2">2</li>
    </ul>
</div>

<script>
    var ul = document.getElementById("ul");
    var i = 0;
    var t = setInterval(fn,1);
    function fn(){
        i--;
        ul.style.left = i+"px";
        if(i<=-1600){
            i=0;
        }
    }
    ul.onmouseover = function (){
        clearInterval(t);
    };
    ul.onmouseout = function(){
        t = setInterval(fn,1);
    }
</script>

小案例（圖片無(wú)縫滾動(dòng)輪播圖）

    <style>
        *{
            margin: 0;padding: 0;
        }
        .box{
            width: 100%;
            height: 470px;
            position: relative;
            overflow: hidden;
          }
        ul{
            list-style: none;
            position: absolute;
        }
        li{
            width: 13440px;
        }
        img{
            height: 470px; float: left;
        }

    </style>


<div class="box">
    <ul id="ul">
        <li>![](images/banner_1.jpg)</li>
        <li>![](images/banner_2.jpg)</li>
        <li>![](images/banner_3.jpg)</li>
        <li>![](images/banner_4.jpg)</li>
        <li>![](images/banner_5.jpg)</li>
        <li>![](images/banner_6.jpg)</li>
        <li>![](images/banner_1.jpg)</li>
    </ul>
</div>

<script>
    var ul = document.getElementById("ul");
    var time = null;
    var n = 0;     //  圖片索引
    var left = 0;  //  向右動(dòng)的距離
    setTimeout(fun,3000);
    function fun(){
        n--;
        if(n<-6){
            n = -1;
            left = 0;    // 重置
            ul.style.left = "0px";   //  重置
        }
        time = setInterval(function(){
            left--;
            ul.style.left = left + "px";
            if(left <= n*1920){
                clearInterval(time);
                setTimeout(fun,3000);
            }
        },1);
    }

</script>