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

曾经终败给现在 2022-12-18 12:57 148阅读 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 条评论，148人围观）

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

相关阅读

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

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

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

相关 Vue实现页面的局部刷新（router-view页面刷新）

[https://blog.csdn.net/a5252145/article/details/102745598?utm\_medium=distribute.pc\_rel

港控/mmm°/ 2022年12月22日 11:23/ 0 赞/ 358 阅读

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

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

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

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

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

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

相关 jQuery实现AJAX定时刷新局部页面实例

本篇文章通过两种方法实例讲解ajax定时刷新局部页面，当然方法有很多种，也可以不使用ajax来刷新页面，可以使用jquery中的append来给指定内容加东西，但是都不太实

向右看齐/ 2022年06月14日 06:09/ 0 赞/ 355 阅读

相关控制Browser定时刷新

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

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

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

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

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

相关 Vue定时刷新页面数据

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

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

相关 js定时刷新页面

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

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

相关 MUI返回父页面刷新功能实现

一头文件引用 <script type="text/javascript" src="js/mui.js"></script> 二子页面代码定义 b

Love The Way You Lie/ 2021年07月24日 11:33/ 0 赞/ 466 阅读