jquery 定時器的使用

在頁面上定時作某些事，如：站內短信提醒：當發信人給收件人發送一條短信，收件人在瀏覽此網站的時候，網站右下角會彈出一個框，提醒收件人已經收到一條短信，收件人可經過點擊提醒，查看他的短信。javascript

如下我寫了一個例子，綜合了幾個具體功能在一塊兒：css

一、jquery修改頁面上某個div中的內容html

二、時間格式化功能java

三、定時器設置，開始和中止jquery

代碼以下：web

`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>

(鼠標移到代碼上去，在代碼的頂部會出現四個圖標，第一個是查看源代碼，第二個是複製代碼，第三個是打印代碼，第四個是幫助)

網站