JavaScript 计时事件

Posted 忘尘天外天

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);
                        }
                 }

       }    

 

以上是关于JavaScript 计时事件的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript计时器

JavaScript 计时

js の 计时器

带有计时事件的 JavaScript 递归 (setTimeout)

python使用上下文对代码片段进行计时,非装饰器

javascript异步回调