一个页面定时刷新及控制暂停刷新的功能实现

需求

页面定时每隔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;}
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

云焰

你的鼓励是我创作的最大动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值