在页面上定时做某些事,如:站内短信提醒:当发信人给收件人发送一条短信,收件人在浏览此网站的时候,网站右下角会弹出一个框,提醒收件人已经收到一条短信,收件人可通过点击提醒,查看他的短信。
以下我写了一个例子,综合了几个具体功能在一起:
1、jquery修改页面上某个div中的内容
2、时间格式化功能
3、定时器设置,开始和停止
代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery定时器使用方法</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#div1{ font-size:36px; color:#f00; font-weight:bold; }
</style>
</head>
<body>
<div></div>
<script type="text/javascript" src="http://www.aspbc.com/js/jquery.js"></script>
<input type="button" value="开始">
<input type="button" value="停止">
<script type="text/javascript">
$(function(){
chat();
run();
//加载页面时启动定时器
var interval;
//定义一个定时器
function run() {
interval = setInterval(chat, "1000"); //定时的设置
}
function chat() {
var d=new Date().format('yyyy-MM-dd hh:mm:ss');
$("#div1").html(d); //jquery修改页面上div中的内容
}
$("#closeChat").click(function(){
clearTimeout(interval); //关闭定时器
})
$("#startChat").click(function(){
chat();
interval = setInterval(chat, "1000");
//启动定时器
})
});
Date.prototype.format = function(format)
{
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
(this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length==1 ? o[k] :
("00"+ o[k]).substr((""+ o[k]).length));
return format;
}
</script>
</body>
</html>
(鼠标移到代码上去,在代码的顶部会出现四个图标,第一个是查看源代码,第二个是复制代码,第三个是打印代码,第四个是帮助)
感谢wangsdong投稿
如果你对上面的教程不理解,点击此处,发短信请教wangsdong
更多关于 定时器 的教程