JavaScript 計時事件

忘塵天外天發表於2017-09-10
JavaScript事件

通過使用JavaScript，可以在一個設定的時間間隔之後來執行程式碼，而不是在函式被呼叫後立即執行。稱之為計時事件。在JavaScript中使用計時事件是很容易的，兩個關鍵方法是：

  • setInterval()  - 間隔指定的毫秒數不停的執行指定的程式碼
  • setTimeout()  - 暫停指定的毫秒數後執行指定的程式碼

注意：setInterval() 和setTimeout() 都是HTML DOM Window物件的兩個方法。

setInterval()方法

setInterval() 間隔指定的毫秒數不停的執行指定的程式碼 ，語法：

    window.setInterval(function(){alert("Hello")},3000);//每3秒彈出hello

 window.setInterval()方法可以不使用window字首，直接使用setInterval()。setInterval()的第一個引數是函式（function）。第二個引數是間隔的毫秒數。下面是顯示當前時間。

     var  myVar=  setInterval(function(){ myTimer},1000) ;
    function  myTimer() {
        var  d = new  Date() ;
       var  t  = d.toLocaleTimeString() ;
       document.getElementById("demo").innerHTML = t ;             
     }

 停止執行：

clearInterval()方法用於停止setInterval()方法執行的函式程式碼。語法：

window.clearInterval(intervalVariable)

 該方法也可以不使用window字首，直接使用函式clearInterval()。要使用clearInterval()，在建立計時方法時必須是全域性變數：

<p id="demo"></p>
<button  onclick="myStopFunction()">Stop time</button>

<script>
var  myVar = setInterval(function(){myTimer()},1000);
function myTimer(){
   var  d  =  new  Date() ;
    var  t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t ;   
}
     function myStopFunction(){
      clearInterval(myVar) ;
}
</script>

 setTimeout()方法

window.setTimeout(javascript  function ,毫秒數);

  setTimeout()方法會返回某個值。在上面的語句中，值被儲存在名為t的變數中。假如想取消這個 setTimeout()，可以使用這個變數名來指定它。 setTimeout()的第一個引數是含有JavaScript語句的字串。這個㐇可能“alert("5 second!")”,或者對函式的呼叫，諸如alertMsg(),第二個引數指從當前起多少毫秒後執行第一個引數。

如何停止執行setTimeout()方法？

clearTimeout()方法用於停止執行setTimeout()方法的函式程式碼。

window.clearTimeout(timeoutVariable);timeoutVariable也需要是個全域性變數。

JavaScript  Cookie

Cookie是一些資料，儲存於使用者電腦上的文字檔案中。當web伺服器向瀏覽器傳送web頁面時，在連線關閉後，服務端不會記錄使用者的資訊。Cookie的作用就是用於解決如何記錄客戶端的使用者資訊：當使用者訪問web頁面時，他的名字可以記錄在cookie中。當使用者下一次訪問該頁面時，可以在cookie中讀取使用者訪問的記錄。

Cookie以名/值對形式存在，當瀏覽器從伺服器上請求web頁面時，屬於頁面的cookie會被新增到該請求中。服務端通過這種方式來獲取使用者的資訊。

使用JavaScript建立Cookie

 JavaScript可以使用document.cookie屬性來建立、讀取、及刪除cookie。建立cookie：

document.cookie = "username=zhang san";

 還可以為cookie新增一個過期時間（以UTC或GMT時間）。預設情況下。cookie在瀏覽器關閉時刪除：document.cookie="username=zhang san;expires=Thu,11 Sep 2017 12:00:00  GMT";還可以使用path引數告訴瀏覽器cookie的路徑。預設情況下，cookie屬於當前頁面。

document.cookie="username=zhang san;expires=Thu,11 Sep 2017 12:00:00 GMT; path=/";

 使用JavaScript讀取Cookie

在JavaScript中，可以使用以下程式碼來讀取cookie：

var  x = document.cookie ;

 document.cookie將以字串的形式返回所有的cookie，型別格式：cookie1=value；cookie2=value；cookie3=value；

使用JavaScript修改Cookie

在JavaScript中，修改cookie類似建立cookie：

document.cookie="username=li si;expires= Thu,11 Sep 2017 12:00:00 GMT;path/" ;

 舊的cookie將被覆蓋。

使用JavaScript刪除Cookie

刪除cookie非常簡單。只需啊喲設定expires引數為以前的時間即可：

document.cookie = "username=;expires=Thu,o1 Sep 2017 00:00:00 GMT";

 刪除時不必指定cookie的值。

Cookie字串

document.cookie屬性看起來像一個普通的文字字串，但其實不是。即使在document.cookie中寫入一個完整的cookie字串，當重新讀取該cookie資訊時，cookie資訊是以名/值對形式展示的。如果設定了新的cookie，舊的cookie不會被覆蓋。新的cookie將新增到document.cookie中，所以如果重新讀取document.cookie，會獲得多個cookie名/值對：cookie1=value；cookie2=value；如果要查詢一個指定的cookie值，必須建立一個JavaScript函式在cookie字串中查詢cookie值。

JavaScript  Cookie例項

下面例項中，建立cookie來儲存訪問者名字。首先，訪問者訪問web頁面，他在填寫名字時，該名字會儲存在cookie中。訪問者下一次訪問頁面時，會看到一個歡迎的訊息。這個例項，會建立3個JavaScript函式：1.設定cookie值的函式；2.獲取cookie值的函式；3.檢測cookie值的函式

設定cookie值的函式：用於儲存服務者的名字。

    function   setCookie(cname,cvalue,exdays)
    {
        var  d  = new Date() ;
        d.setTime(d.getTime()+(exdays*24*60*60*1000));
        var  expires  =  "expires=" + d.toGMTString();
       document.cookie = cname + "=" + cvalue + ";" +expires;         
}

 函式解析：cookie的名稱為cname，cookie的值為cvalue，並設定了cookie的過期時間呢expires。

獲取cookie值的函式：建立一個函式使用者返回指定的cookie值。

         function  getCookie(cname)
       {
           var  name= cname + "=";
           var  ca = document.cookie.split(';');
           for(var i = 0;i<ca.length ;i++)
          {
              var  c = ca[i].trim();
              if(c.indexOf(name)==0){
                   return  c.substring(name.length,c.length);
                }
               return  "";
           }  
     }

函式解析：cookie名的引數為cname。建立一個文字變數用於檢索指定cookie： cname + "="。使用分號來分隔document.cookie字串，並將分隔後的字串陣列賦給ca，迴圈ca陣列（i=0;i<ca.length;i++），然後讀取陣列中的每個值，並去除前後的空格（c=ca[1].trim()）。如果找到cookie（c.indexOf(cname)==0）,返回cookie的值（c.substring(name.length,c.length)）。如果沒找到cookie，返回""。

檢測cookie值的函式

建立一個檢測cookie是否建立的函式。如果設定了cookie，將顯示一個問候資訊。如果沒有設定cookie，將會顯示一個彈窗用於輸入訪問者的名字，把那個呼叫setCookie函式將訪問者的名字儲存365天：

        function   checkCookie()
       {
           var   username = getCookie("username") ;
           if(username!="")
            {
                alert("歡迎"+username);
             }
            else {
               username = prompt("請輸入你的名字","");
                   if(username!=""&&username!=null){
                          setCookie("username",username,365);
                        }
                 }

       }

 

相關文章