jQuery技术

jquery 定时器的使用

字号+ 作者:H5之家 来源:H5之家 2017-04-03 12:02 我要评论( )

jquery 定时器的使用,Js教程,技术教程,asp编程网

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

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

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


更多关于 定时器 的教程

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Jquery插件 easyU?jquery easyui I属性汇总_雨枫技术教程网

    Jquery插件 easyU?jquery easyui I属性汇总_雨枫技术教程网

    2015-11-23 13:37

  • 有方向有目的学习网站制作

    有方向有目的学习网站制作

    2015-10-05 11:26

网友点评