jquery 定时器的使用

最新推荐文章于 2021-07-05 13:31:08 发布
最新推荐文章于 2021-07-05 13:31:08 发布
阅读量506 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：https://my.oschina.net/u/1789316/blog/277640
版权

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

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

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
37Date.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>

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

转载于:https://my.oschina.net/u/1789316/blog/277640

chouyin6942
关注
jquery 一个简单的定时器 setInterval() ，clearInterval()
碼农的日常
05-24 3万+
一个简单的定时器 setInterval()，clearInterval()用法，经常使用的场景是，验证码的发送，啥都不说直接上代码&lt;script&gt; var clock = ''; var nums = 120; function sortMessage(){ var tel = $("#managerTel").val(); if(!tel){ alertError("请输入...
jQuery 定时器
10-15
提供了三个函式 1 everyTime 时间间隔 [计时器名称] 函式名称 [次数限制] [等待函式程序完成] 2 oneTime 时间间隔 [计时器名称] 呼叫的函式 3 stopTime [计时器名称] [函式名称] everyTime 时间间隔 [计时器名称] 函式名称 [次数限制] [等待函式程序完成] 每1秒执行函式test function test { do something } $ "body" everyTime "1s" test ; 每1秒执行 $ "body" everyTime "1s" function { do something } ; 每1秒执行 并命名计时器名称为A $ "body" everyTime "1s" "A" function { do something } ; 每20秒执行 最多5次 并命名计时器名称为B $ "body" everyTime "2das" "B" function { do something } 5 ; 每20秒执行 无限次 并命名计时器名称为C 若时间间隔抵到 但函式程序仍未完成则需等待执行函式完成后再继续计时 $ "body" everyTime "2das" "C" function { 执行一个会超过20秒以上的程式 } 0 true ; oneTime 时间间隔 [计时器名称] 呼叫的函式 倒数10秒后执行 $ "body" oneTime "1das" function { do something } ; 倒数100秒后执行 并命名计时器名称为D $ "body" oneTime "1hs" "D" function { do something } ; stopTime [计时器名称] [函式名称] 停止所有的在$ "body" 上计时器 $ "body" stopTime ; 停止$ "body" 上名称为A的计时器 $ "body" stopTime "A" ; 停止$ "body" 上所有呼叫test 的计时器 $ "body" stopTime test ; 自定义时间单位 打开源代码 找到 powers: { Yeah this is major overkill "ms": 1 "cs": 10 "ds": 100 "s": 1000 "das": 10000 "hs": 100000 "ks": 1000000 }">提供了三个函式 1 everyTime 时间间隔 [计时器名称] 函式名称 [次数限制] [等待函式程序完成] 2 oneTime 时间间隔 [计时器名称] 呼叫的函式 3 stopTime [计时器名称] [函式名称] [更多]
jQuery定时器简单使用
清平调、其N 的博客
01-31 7149
jQuery定时器 下面介绍一个用jQuery实现JS中的定时器方法,在jQuery中的jQuery Timers插件中已封装JS的setTimeout 和 setInterval 方法. 在jQuery Timers中提供了3个函数式 everyTime(时间间隔, [计时器名称], 函式名称, [次数限制], [等待函式程序完成]) oneTime(时间间隔, [计时器名称], 呼叫的函...
jquery setInterval() 定时器用法
qq_27914395的博客
10-24 1178
1.setInterval()用法： var idInt = setInterval(function(){},2000); 2.clearInterval用法： clearInterval(idInt); 实例： $(function(){ var data=$.ajax({ url:"{:U('process/getjson')}", dataT
jquery插件jTimer(jquery定时器)使用方法
10-26
很多时候我们需要按时间间隔执行一个任务,当满足一定条件时停止执行.此插件旨在解决这一经常遇到的问题
简单的代码实现jquery定时器
01-19
简单的代码实现jquery定时器. 今天,项目遇到一个消息的模块,在导航条最上面.想实现,当收到消息的时候能够及时的刷新,显示收到消息的条数.想了半天.想了2种方法, 1.利用struts2的Ajax标签. 2.利用jquery. struts2有点...
jquery定时器
05-16
**jQuery定时器** ...在JavaScript中，定时器...通过使用jQuery定时器，开发者可以更加便捷地管理和控制页面上的定时任务，提高代码的可读性和可维护性。结合jQuery的其他功能，可以创造出丰富多样的动态效果和用户体验。
jquery 定时器
qq_23476319的博客
09-06 400
例子     /* $(document).ready(function(){             alert("kyi");          }); */     //被执行的方法     function time1(){            alert("定时器");          }      window.onlo
jQuery 一次定时器_Jmeter常用定时器的使用 - 小孙同学
weixin_39968852的博客
10-23 180
一、定时器的作用域1、定时器是在每个sampler(采样器)之前执行的，而不是之后(无论定时器位置在sampler之前还是下面)。2、当执行一个sampler之前时，所有当前作用域内的定时器都会被执行。3、如果希望定时器仅应用于其中一个sampler，则把定时器作为子节点加入。二、常用定时器使用1、固定定时器(Constant Timer)如果需要每个sample请求均延迟，则将定时器放在与请求持...
jquery定时器封装
hua_ban_yu的博客
11-30 2380
前端开发很多时候都需要使用到定时器，定时器写法非常简单，只需要setTimeout()、clearTimeout()这两个方法就可以制作了。 定时器的停止时通过 由 setTimeout() 返回的 ID 值 进行取消，当页面有多个定时器时调用的又是同一个定时器方法就会存在定时器混乱，页面有多个定时器时停止定时器就是个难题，所以需要把定时器封装为一个方法，然后通过方法进行定时器的调用。
jquery的定时器setTimeout()与定时循环执行器setInterval()的区别，定时百度地图
热门推荐
cheng549309240的博客
08-18 7万+
帮助大家区分jquery的setInterval() 方法和setTimeout()方法，记得点赞哦
HTML初学入门基础1----------各种标签
涟涟的博客
12-08 718
一、使用工具 1.谷歌浏览器（其他浏览器也可） 2.取色器（Instant Eyedropper） 3.VSCode 二、新建项目 Ctrl+S保存 保存类型选为HTML类型 在开始页面打出英文! 按回车键 接下来我们就在body标签内写代码了 写完代码之后保存，然后我们找到你保存的html，使用浏览器打开，每保存一次，可以使用刷新看最新的成果 注： ...
JQuery定时器(jQuery Timers)
李木子的博客
03-16 8962
使用步骤 JQuery Timers应用知识 提供了三个函式 1. everyTime(时间间隔, [计时器名称], 函式名称, [次数限制], [等待函式程序完成]) 2. oneTime(时间间隔, [计时器名称], 呼叫的函式) 3. stopTime ([计时器名称], [函式名称]) /***********************************************...
jquery定时器：setTimeout()、setTimeout() 重复点击触发多次
weixin_46507548的博客
07-05 4256
出现下图这种情况是因为上一次定时器还没结束，就被点击触发下一次，所以多次累计重复了。 因为问题出现在“多次初始化定时器”，那就要在每次初始化定时器之前先执行清除操作，保证只有一个定时器在执行，就不会出现这样的问题了。 例如： var btn = document.querySelector('button'); var time; btn.addEventListener('click', function() { clearInterval(time); //清除之
javascript/jquery 简单的页面定时器自动跳转登陆界面
Cangwuwuwu
03-24 661
登录成功页面 success.html // js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册成功！</title> <script type="text/javascript"> ...
jQuery定时器
悟能的师兄的专栏
03-29 7056
下面介绍一个用jQuery实现JS中的定时器方法,在jQuery中的jQuery Timers插件中已封装JS的setTimeout 和 setInterval 方法. 在jQuery Timers中提供了3个函数式 everyTime(时间间隔, [计时器名称], 函式名称, [次数限制], [等待函式程序完成]) oneTime(时间间隔, [计时器名称], 呼叫的函式) stopTim...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值