jquery 定时器的使用

在页面上定时做某些事,如:站内短信提醒:当发信人给收件人发送一条短信,收件人在浏览此网站的时候,网站右下角会弹出一个框,提醒收件人已经收到一条短信,收件人可通过点击提醒,查看他的短信。

以下我写了一个例子,综合了几个具体功能在一起:

1、jquery修改页面上某个div中的内容

2、时间格式化功能

3、定时器设置,开始和停止

代码如下:

01 <html xmlns="http://www.w3.org/1999/xhtml">
02 <head>
03
04 <title>jquery定时器使用方法</title>
05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
06 <style type="text/css">
07 #div1{ font-size:36px; color:#f00; font-weight:bold; }
08 </style>
09 </head>
10
11 <body>
12 <div id="div1"></div>
13 <script type="text/javascript"src="http://www.aspbc.com/js/jquery.js"></script>
14 <input type="button" name="startChat" id="startChat" value="开始">
15 <input type="button" name="closeChat" id="closeChat" value="停止">
16 <script type="text/javascript">
17 $(function(){
18      chat();       
19      run();             //加载页面时启动定时器  
20      var interval;         //定义一个定时器
21      function run() {  
22         interval = setInterval(chat, "1000");   //定时的设置
23      }  
24      function chat() {  
25           var d=new Date().format('yyyy-MM-dd hh:mm:ss');
26           $("#div1").html(d); //jquery修改页面上div中的内容
27      }         
28      $("#closeChat").click(function(){         
29          clearTimeout(interval);  //关闭定时器         
30      })  
31       $("#startChat").click(function(){         
32          chat();
33          interval = setInterval(chat, "1000");     //启动定时器         
34      })       
35 });
36
37 Date.prototype.format = function(format)
38 {
39     var o = {
40     "M+" : this.getMonth()+1, //month
41     "d+" : this.getDate(),    //day
42     "h+" : this.getHours(),   //hour
43     "m+" : this.getMinutes(), //minute
44     "s+" : this.getSeconds(), //second
45     "q+" : Math.floor((this.getMonth()+3)/3),  //quarter
46     "S" : this.getMilliseconds() //millisecond
47     }
48     if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
49     (this.getFullYear()+"").substr(4 - RegExp.$1.length));
50     for(var k in o)if(new RegExp("("+ k +")").test(format))
51     format = format.replace(RegExp.$1,
52     RegExp.$1.length==1 ? o[k] :
53     ("00"+ o[k]).substr((""+ o[k]).length));
54     return format;
55 }
56 </script>
57 </body>
58 </html>

(鼠标移到代码上去,在代码的顶部会出现四个图标,第一个是查看源代码,第二个是复制代码,第三个是打印代码,第四个是帮助)

你可能感兴趣的:(jquery 定时器的使用)