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>

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

网站