需求
页面定时每隔1分钟刷新一次,人工可以控制点击暂停后,停止间隔刷新,再次点击后,继续间隔时间刷新。
实现
先上一个效果图
上图就是,点击暂停和继续的切换控制。
实现具体编码如下
页面代码
<div style="float:right;padding-right:10px;">
<i class="fa fa-bolt" onclick="toggole_refresh_onoff(this)" style="padding-right:5px;"></i>
<span id="d_refresh">60</span>
</div>
javascript脚本部分
var i_second=60,refresh_en=1;//默认为能刷新
$J(function(){
var interval =setInterval(function(){ refresh_interval(); }, 1000);
if(refresh_en==0){ clearInterval(interval ); }
});
//间隔刷新
function refresh_interval(){
if(refresh_en==1){
$J("#d_refresh").html(i_second--); if(i_second==0){ location.reload(); }
}
}
//切换显示刷新开关
function toggole_refresh_onoff(a_ele){
var v_classnames=$J(a_ele).attr('class');
if(v_classnames.indexOf("fa-bolt") != -1){
$J(a_ele).removeClass("fa-bolt").addClass("fa-ban"); refresh_en=0;}
if(v_classnames.indexOf("fa-ban") != -1){
$J(a_ele).removeClass("fa-ban").addClass("fa-bolt"); refresh_en=1;}
}