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

曾经终败给现在 2022-12-18 12:57 167阅读 0赞

## 需求 ##

页面定时每隔1分钟刷新一次，人工可以控制点击暂停后，停止间隔刷新，再次点击后，继续间隔时间刷新。

## 实现 ##

先上一个效果图

![20201026222152773.png][]![20201026222205919.png][]

上图就是，点击暂停和继续的切换控制。

实现具体编码如下

页面代码

<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;}
    }

[20201026222152773.png]: https://img-blog.csdnimg.cn/20201026222152773.png
[20201026222205919.png]: /images/20221122/24177c79a4924a4f9e9518f325826154.png

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue页面实现简单的定时刷新

export default { data() { return { }; }, mounted:

一时失言乱红尘/ 2023年08月17日 16:41/ 0 赞/ 84 阅读

相关 js定时刷新页面

/添加定时器/ var Timer = 600000; var screenTimer; function s

我就是我/ 2023年06月06日 13:29/ 0 赞/ 24 阅读

相关 php定时刷新某个页面,php定时刷新页面循环刷新某个页面防止apache意外停止

PHP 后台定时循环刷新某个页面如果间隔时间过长的话会出现apache自动停止的现象。出现的原因则是设置了 ThreadsPerChild 450 MaxConne

我会带着你远行/ 2023年01月14日 14:59/ 0 赞/ 235 阅读

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

需求页面定时每隔1分钟刷新一次，人工可以控制点击暂停后，停止间隔刷新，再次点击后，继续间隔时间刷新。实现先上一个效果图 ![202010262221527

曾经终败给现在/ 2022年12月18日 12:57/ 0 赞/ 168 阅读

相关 html 刷新子页面刷新,如何实现js弹出一个添加或修改的子窗口，然后提交刷新页面功能？...

1.好可怜，提了几天的问题了都没有人回答，牛币少了点，这样的问题百度有的 2.给你一段我原来写的片段 3. 用户管理 li \{list-style-type:none

╰半橙微兮°/ 2022年10月06日 04:43/ 0 赞/ 10 阅读

相关 JS定时刷新页面及跳转页面

[JS定时刷新页面及跳转页面][JS] Javascript 返回上一页 1. Javascript 返回上一页 history.go(-1), 返回两个页面: hi

墨蓝/ 2022年09月19日 05:25/ 0 赞/ 284 阅读

相关控制Browser定时刷新

package cn.itcast.response; import java.io.IOException; import jav

港控/mmm°/ 2022年05月16日 06:17/ 0 赞/ 224 阅读

相关 jquery刷新页面（局部及全页面刷新）

局部刷新：这个方法就多了去了，常见的有以下几种； $.get方法，$.post方法，$.getJson方法,$.ajax方法如下前两种使用方法基本上一样 $.get

冷不防/ 2021年11月16日 10:31/ 0 赞/ 492 阅读

相关 Vue定时刷新页面数据

我现在只知道两种最常见的定时刷新方案，一种是利用Vue的内置函数setTimeout、setInterval定时执行，另一种是websocket消息推送。我的需求是，当数据库中

骑猪看日落/ 2021年09月24日 01:54/ 0 赞/ 883 阅读

相关 js定时刷新页面

/添加定时器/ var Timer = 600000; var screenTimer; function s

墨蓝/ 2021年07月26日 15:39/ 0 赞/ 605 阅读