文档章节

JS 倒计时刷新页面实现

郭恩洲_OSC博客
 郭恩洲_OSC博客
发布于 2014/09/16 12:05
字数 263
阅读 98
收藏 2

1.实现效果

    点击定时刷新可以开启和关闭刷新事件,同时提供倒计时功能.

2.编写JS


$(function(){
         //注册click事件,或者页面直接写onClick
	$('#isflush').click(function(){
		flushCount();
	});
	
	//可以页面加载事启动定时任务(JS模拟点击触发)
	$('#isflush').trigger("click");
})




var second=10;
/** * 点击checkBox启动或关闭定时任务
 */
function flushTable(){
	var bln = $("#isflush")[0].checked;
		if(bln==true){
			this.second = 10;
			cle = setInterval("flushCount()",1000); 
		}else{
			if(cle!=""){
				window.clearInterval(cle);
				$('#flushCount').html('');
			}
		}
}

/**
 * 调用倒计时显示功能,如果倒计时<=10 调用queyList函数请求
 */
function flushCount(){
	 this.second--;
	 if(this.second <=0){
		 $('#flushCount').html('刷新!');
		 queryList();
		 this.second = 10;
	 }
	 $('#flushCount').html(this.second);
}

/**
 * ajax请求刷新页面
 */
function queryList(){
	//alert('A');
	$.ajax({
		url : basePath+"/admin/chat!flushSessionView.action",
		type : "post",
		dataType : "json",
		success : function (result) {
			if(result!=null && result.isSuccess){
				$('.leftside').html(result.message);
			}else{
				alert(result.message);
			}
		},
		error: function(result) {
			alert("请求异常!"+result.message);
		}
	});
}



3.编写页面

<span style="margin-left: 500px;">
<input type="checkbox" onClick="flushTable()" id="isflush"></input>
定时刷新 <b style="color: red" id="flushCount"></b>
</span>



© 著作权归作者所有

郭恩洲_OSC博客
粉丝 37
博文 252
码字总数 117699
作品 0
徐汇
高级程序员
私信 提问
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
0
0
记一次 Vue 移动端活动倒计时优化

前言 通常写倒计时效果,用的是 setInterval,但这会引发一些问题,最常见的问题就是定时器不准。 如果只是普通的动画效果,倒也无所谓,但倒计时这种需要精确到毫秒级别的,就不行了,否则活...

SephirothKid
04/17
0
0
JavaScript 前端倒计时纠偏实现

前端网页倒计时是非常常见的应用,我们在各大购物网站的秒杀活动中总是能见到它的身影。但是在实际情况中,我们常常会发现当网页不刷新、让倒计时程序持续运行时,显示时间相比实际时间会越来...

逆葵
2018/09/28
0
0
Javascript 实现倒计时(10秒)自动关闭网页

JS倒计时10秒 实现功能 实例代码一: <html> <title>倒计时关闭网页</title> <head> <script language="javascript"> var cTime=10;//这个变量是倒计时的秒数设置为10就是10秒 function Tim......

leiboo
2014/04/27
0
0
Javascript 返回上一页 返回下一页

Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forward()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的U...

Fx_demon
2014/12/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

IT兄弟连 Java语法教程 Java语言的跨平台特性

什么是平台 Java是可以跨平台的编程语言,那么首先我们需要知道什么是平台,通常我们把CPU与操作系统的整体称为平台。 CPU大家都知道,是计算机的大脑,它既负责思维运算,又负责计算机中各种...

老码农的一亩三分地
8分钟前
0
0
http传值问题

这两天遇到一个问题 ,与一个渠道联调接口,http请求,展示ptf 的需求,服务方以一个二进制的方式返回。 当时我们在一开始开发的时候,我们按照读取文件的方式处理,本地存一个ptf 的方式 ,...

鬼才王
16分钟前
1
0
【面试】如果你这样回答“什么是线程安全”,面试官都会对你刮目相看

不是线程的安全 面试官问:“什么是线程安全”,如果你不能很好的回答,那就请往下看吧。 论语中有句话叫“学而优则仕”,相信很多人都觉得是“学习好了可以做官”。然而,这样理解却是错的。...

中关村的老男孩
17分钟前
4
0
5.01- Druid数据源配置

1、配置项 配置 缺省值 说明 name 无 配置这个属性的意义在于,如果存在多个数据源,监控的时候 可以通过名字来区分开来。如果没有配置,将会生成一个名字, 格式是:"DataSource-" + Syste...

静以修身2025
21分钟前
0
0
itop4412开发板-Linux内核的编译

本篇文章基于itop4412开发板 5.3.2.1源码目录 Linux 内核源码在光盘“06_源码_uboot 和 kernel”目录下,如下图所示。 5.3.2.2 编译器 内核的编译器和 uboot 的编译器一样,参考“5.3.1.2 编...

书白
26分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部