JavaScript 计时事件

Posted 2020-10-06 忘尘天外天

通过使用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);
                        }
                 }

       }