javascript的計時器簡單介紹

首先來介紹計時器setInterval（）的概念和使用方法：
1.setInterval(函數，毫秒)：計時器是一個帶有時間概念的東西，表示每間隔多少毫秒的時間執行一次函數體內的代碼。類似於循環結構，不過與循環結構仍然存在一些差異：當程序一旦進入循環結構，必須將循環體內的語句執行完畢出循環之後才能執行其他語句。而計時器只需要在到達某時間間隔的時候執行一次函數體內額代碼即可，其他時間仍然可以執行其他語句
2.使用方法示例：

<script>
    var i=0;
    function fn(){
        document.title=++i;
    }
    setInterval(fn,300);//此處只能使用函數名，不能寫成函數名（），否則函數調用一次後結束，計時器不起作用
</script>

由上例可以看出來計時器的使用方法是：setInterval(要執行的函數，間隔時間),這也是除了函數名（），元素.事件=函數之外的第三種調用函數的方法
注：計時器的時間單位是毫秒，最小時間間隔是20及以上

3.計時器的清除：clearInterval(),括號內是想要清除掉的計時器。通常情況下，在創建計時器的時候會將計時器賦給一個變量，清除時直接清除那個變量即可，例如：

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

計時器練習1：設置兩個按鈕，一個’換背景’，一個’停’，並給body設置一個背景（如1，2，3，4放數組裏），點擊’換背景’時，每隔3秒變成下一張，點擊’停’則不再切換

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
body{background-image:url(img/1.png);}
</style>
</head>
<body>
<input type="button" value="換背景"/>
<input type="button" value="停"/>
<script>
var aBtn = document.getElementsByTagName('input');
var timer = null;
aBtn[0].onclick = function(){
    clearInterval(timer);
    timer=setInterval(fn1,1500);
};
var i = 1;
function fn1(){
    if(i>=4){
        i=1;
    }else{
        i++;
    }
    document.body.style.backgroundImage = 'url(img/' +i+ '.png)';
}
aBtn[1].onclick = function(){
    clearInterval(timer);
};
</script>
</body>

計時器練習2：用開關的方法把這個功能集中在一個按鈕上面

<body>
<button id="btn1">更換背景</button>
<script>
    var oBtn1=document.getElementById("btn1");
    var arr=['img/1.png','img/2.png','img/3.png','img/4.png'];
    var timer=null;
    var i=0;
    document.body.style.backgroundImage="url("+"img/1.png)";
    var judge=true;
    oBtn1.οnclick=function(){

        if(judge)
        {timer=setInterval(fn1,1000);judge=false;}
        else{clearInterval(timer);judge=true;}
    }
    function fn1(){
        i++;
        if(i==3){
            i=0;
        }
        document.body.style.backgroundImage="url("+arr[i]+")"
    }
</script>
</body>

通過上面的兩個例子對計時器的使用有了簡單的瞭解，但是也發現了一個bug：每次點擊按鈕觸發點擊事件時都會開始一個新的定時器，背景圖片更換的速度會越來越快。解決方法：爲了避免用戶多次連續點擊造成混亂的情況，每次在點擊之後先應該關閉計時器，再開啓新的計時器。

接下來介紹延時計時器setTimeout()，用法和計時器基本類似，但顧名思義，延時計時器是在延遲一定的時間後纔開始執行函數體內的代碼。它與計時器的嚴格區別如下：

setTimeout()方法是在等待指定時間後執行函數, 且只執行一次傳入的句柄函數

setInterval()方法是每指定間隔時間後執行一次傳入的句柄函數,循環執行直至關閉窗口或clearInterval()

類似的，它也有對應的清除方法clearTimeout(timer)

直接進入延時計時器的練習環節：
練習1：打開一個網頁1秒後彈出一個廣告（隨便一個網站截屏做背景），如果在3秒之內點擊關閉按鈕則消失，否則超過3秒未點擊關閉按鈕也默認消失。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
body{margin:0;}
#div1{position:fixed;left:50%; width:500px ;margin-left:-250px; top:50%; margin-top:-294px; display:none;}
#btn1{background:#999; cursor:pointer; position:absolute; right:0; top:0;}
</style>
</head>

<body>
    <div id="div1">
        <img src="img/3.png" width="500" height="588" />
        <button id="btn1">X</button>
    </div>
    <script src="myjs/myjs.js"></script>
    <script>
        setTimeout(function fn(){
            getid("div1").style.display='block';
            getid("btn1").οnclick=function(){
                getid("div1").style.display='none';
            }
            setTimeout(function fn(){
                getid("div1").style.display='none';
            },3000)
        },1000);
    </script>
</body>

練習2：QQ顯示詳細內容，鼠標移入展示，移出消失，要求鼠標離開過一小段時間再消失（1.5秒），移動到展示內容上時，不消失，從展示上離開後（1.5秒）再消失

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#div1{width:200px; height:400px; background-color:#930; float:left;}
#div2{width:150px; height:200px; background-color:#060; float:left; margin-left:10px; display:none;}
</style>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
<script>
var timer = null;
function fn1(){
    clearTimeout(timer);
    $('div2').style.display = 'block';
}
function fn2(){
    timer=setTimeout(function(){
        $('div2').style.display = 'none';
    },500)
}
$('div1').onmouseover = fn1;
$('div1').onmouseout = fn2;
$('div2').onmouseover = fn1;
$('div2').onmouseout = fn2;

function $( v ){
    if( typeof v === 'function' ){
        window.onload = v;
    } else if ( typeof v === 'string' ) {
        return document.getElementById(v);
    } else if ( typeof v === 'object' ) {
        return v;
    }
}
</script>
</body>

練習3：類似於練習2，實現這樣的一個效果：鼠標在導航欄上任意指上去時，立即彈出相應的下拉菜單（要求此處切換時不能有延遲）；移出鼠標後下拉框延遲一會再消失；鼠標從導航上移到下拉菜單上時下拉菜單不消失，從下拉菜單上移出時下拉菜單延遲一會再消失；

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link type="text/css" href="css/common.css" rel="stylesheet" />
<style type="text/css">
ul{width:520px; margin:0 auto;}
#ul1 li{float:left;}
#ul1 li a{display:block;padding:0 25px;height:36px; border-left:1px #c6d6e7 solid; border-rightt:1px #c6d6e7 solid; background:url(li.png) repeat-x; line-height:36px;}
#ul1 li a:hover{color:#fff;}
#ul2{width:342px;height:27px; background:url(li2.png) repeat-x; padding-top:6px; position:absolute; top:42px; left:365px; display:none;}
#ul2 li,#ul3 li,#ul4 li,#ul5 li{height:12px; border-right:1px #7b5ab5 solid; float:left; padding:0 8px;}
#ul3{width:342px;height:27px; background:url(li2.png) repeat-x; padding-top:6px; position:absolute; top:42px; left:280px; display:none;}
#ul4{width:342px;height:27px; background:url(li2.png) repeat-x; padding-top:6px; position:absolute; top:42px; left:190px; display:none;}
#ul5{width:342px;height:27px; background:url(li2.png) repeat-x; padding-top:6px; position:absolute; top:42px; left:105px;  display:none;}
</style>
</head>

<body>
    <ul id="ul1" class="clearfix">
        <li><a href="#">首頁</a></li>
        <li><a href="#">關於我們</a></li>
        <li><a href="#">作品</a></li>
        <li><a href="#">博客</a></li>
    </ul>
    <ul id="ul2" class="clearfix">
        <li><a href="#">JS教程</a></li>
        <li><a href="#">彈出層效果</a></li>
        <li><a href="#">3D球面標籤雲</a></li>
        <li><a href="#">windows計算器</a></li>
    </ul>
    <ul id="ul3" class="clearfix">
        <li><a href="#">最後的晚餐</a></li>
        <li><a href="#">圖書管理系統</a></li>
        <li><a href="#">3D球面標籤雲</a></li>
        <li><a href="#">淘寶頁面</a></li>
    </ul>
    <ul id="ul4" class="clearfix">
        <li><a href="#">我們的歷史</a></li>
        <li><a href="#">我們的成績</a></li>
        <li><a href="#">我們的地址</a></li>
        <li><a href="#">聯繫我們</a></li>
    </ul>
    <ul id="ul5" class="clearfix">
        <li><a href="#">公司簡介</a></li>
        <li><a href="#">業務辦理</a></li>
        <li><a href="#">價格介紹</a></li>
        <li><a href="#">經典案例</a></li>
    </ul>
    <script>
        var oUl=document.getElementById("ul1");
        var aLi=oUl.getElementsByTagName("li");
        var oUl2=document.getElementById("ul2");
        var oUl3=document.getElementById("ul3");
        var oUl4=document.getElementById("ul4");
        var oUl5=document.getElementById("ul5");
        var timer=null;
        var arr=[oUl5,oUl4,oUl3,oUl2];
        var x;
        for(var i=0;i<aLi.length;i++){
            aLi[i].index=i;
            aLi[i].οnmοuseοver=function(){
                clearTimeout(timer);
                for(var j=0;j<arr.length;j++){
                    if(arr[j].style.display=='block'){
                        arr[j].style.display='none';
                    }
                }
                arr[this.index].style.display="block";
            }   
        }
        /*for(var j=0;j<aLi.length;j++){
            aLi[j].index=j;
            aLi[j].οnmοuseοut=function(){
                x=this.index;
                timer=setTimeout(fn,500)
            }
        }
        function fn(){
            arr[x].style.display='none';    
        };*/
        //寫成下面的形式也能運行出來，照上面那樣寫是爲了避免某種情況下的某種衝突，這個某種衝突我之前遇到過，但是現在想不起來了，先放在這吧，等有一天想起來的時候再補充
        for(var j=0;j<aLi.length;j++){
            aLi[j].index=j;
            aLi[j].οnmοuseοut=function(){
                timer=setTimeout(function(){
                    aLi[this.index].style.display='none';
                },500)
            }
        }
        oUl5.οnmοuseοver=function(){
            clearTimeout(timer);
            oUl5.style.display="block";
        }
        oUl5.οnmοuseοut=function(){
            timer=setTimeout(function(){
                oUl5.style.display="none";
            },500)  
        }
        oUl4.οnmοuseοver=function(){
            clearTimeout(timer);
            oUl4.style.display="block";
        }
        oUl4.οnmοuseοut=function(){
            timer=setTimeout(function(){
                oUl4.style.display="none";
            },500)  
        }
        oUl3.οnmοuseοver=function(){
            clearTimeout(timer);
            oUl3.style.display="block";
        }
        oUl3.οnmοuseοut=function(){
            timer=setTimeout(function(){
                oUl3.style.display="none";
            },500)  
        }
        oUl2.οnmοuseοver=function(){
            clearTimeout(timer);
            oUl2.style.display="block";
        }
        oUl2.οnmοuseοut=function(){
            timer=setTimeout(function(){
                oUl2.style.display="none";
            },500)  
        }
    </script>
</body>

javascript的計時器簡單介紹

計時器的深入學習2（抖動原理）

javascript的函數（2）及js的獲取元素樣式

rgba和opacity的區別、修改表單中的placeholder屬性樣式

計時器的深入學習1（實現運動效果的domove()函數的封裝過程及回調函數）

javascript的時間對象

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結