JS 倒计时刷新页面实现

最新推荐文章于 2022-07-13 15:01:24 发布

weixin_34162401

最新推荐文章于 2022-07-13 15:01:24 发布

阅读量837

点赞数

文章标签： php 前端 python ViewUI

原文链接：https://my.oschina.net/guoenzhou/blog/314045

版权

2019独角兽企业重金招聘Python工程师标准>>>

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>

转载于:https://my.oschina.net/guoenzhou/blog/314045