計時器函數 setInterval（）
setInterval() //計時器函數
setInterval(要執行的函數，執行間隔（以毫秒為單位，1000毫秒就是一秒)
setInterval(function(){
console.log(111)
},1000)
定時器函數 setTimeout（）
setTimeout()；類似于定時炸彈，規定多久以后執行一次內部的函數
用法：與setInterval()相同
setTimeout(“函數”，執行時間)；
setInterval(“函數”，10)；每隔十秒執行一次；
setTimeout(“函數”，10)；十秒以后執行函數，并且只執行一次；
函數自己調用自己的過程，叫做：遞歸調用；
所以，要記住，遞歸調用一定要有跳出的條件；
清除計時器 clearInterval（）
聲明一個變量，把計時器存起來，然后，用清除語句：
var a=setInterval (function(){},1);
clearInterval(a); //清除計時器
setInterval(function(){},1000);//計時器
function fun（）{
console.log(“a”)
}
setInterval(fun,1000)
setInterval(‘fun()’,1000)
小案例（倒計時跳轉）
<p id="p">5秒后跳轉到百度</p>
<script>
var p = document.getElementById("p");
var i = 5;
setTimeout(fun,1000);
function fun(){
i--;
p.innerHTML = i + "秒后跳轉到百度";
if(i<=0){
window.location.;
}else{
setTimeout(fun,1000)
}
}
</script>
小案例（無縫滾動輪播圖）
<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>
小案例（圖片無縫滾動輪播圖）
<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></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var ul = document.getElementById("ul");
var time = null;
var n = 0; // 圖片索引
var left = 0; // 向右動的距離
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>
