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 定时器的使用相关推荐

jQuery定时器简单使用
jQuery定时器下面介绍一个用jQuery实现JS中的定时器方法,在jQuery中的jQuery Timers插件中已封装JS的setTimeout 和 setInterval 方法. 在jQue ...
html使用定时器timer,jquery插件jTimer jquery定时器的用法举例
本节内容: jquery插件jTimer,jQuery定时器. 需求: 按时间间隔执行一个任务,当满足一定条件时停止执行. 1,插件用法: 复制代码代码示例: (function ($) { $.e ...
JQuery定时器(jQuery Timers)
JQuery Timers应用知识转至: jQuery定时器提供了三个函式 1. everyTime(时间间隔, [计时器名称], 函式名称, [次数限制], [等待函式程序完成]) 2. one ...
Js、jquery 定时器启动与停止效果实现
项目背景: 大二上学期复习完jquery后的国庆作业使用jquery百分百完成以下网址轮播图效果完成效果需求: 一,轮播图每3秒自动切换下一个图片,同时图片对应的选项样式会改变为红色选中状态二, ...
JQuery定时器和轮播图
定时器代码效果如上: 定时器主要使用(setInterval:每隔多少毫秒,执行程序) 代码如下: <!DOCTYPE html> <html><head>< ...
关于jquery定时器设置问题 ios定时器无法响应问题 ios 时间显示为NaN问题优惠时间倒计时
设计时间为:"2019-12-17"发现安卓端和浏览器端,浏览器模拟器显示均没问题,但是ios 手机显示为NaN 解决办法 :把"2019-12-17"改为&q ...
c语言中timers的用法,jQuery定时器使用方法，jQuery Timers
Jquery已封装JS的setTimeout 和 setInterval 方法,下面看下应用例子: JS Code [http://www.xueit.com]$("#close-butto ...
jquery定时器封装
前端开发很多时候都需要使用到定时器,定时器写法非常简单,只需要setTimeout().clearTimeout()这两个方法就可以制作了. 定时器的停止时通过由 setTimeout() 返回的 ...
jquery定时器：setTimeout()、setTimeout() 重复点击触发多次
出现下图这种情况是因为上一次定时器还没结束,就被点击触发下一次,所以多次累计重复了. 因为问题出现在"多次初始化定时器",那就要在每次初始化定时器之前先执行清除操作,保证只有一个定 ...

jquery 定时器的使用

jquery 定时器的使用相关推荐

最新文章

热门文章