v10258

1.静态代码

<input type="button" class="btn mlw" value="开启自动刷新" id="controlRefresh" />
                    <select name="time" id="time">
                        <option value="5000">5秒</option>
                        <option value="10000">10秒</option>
                        <option value="15000" selected="selected">15秒</option>
                        <option value="30000">30秒</option>
                        <option value="60000">一分钟</option>
                    </select>

2.通过js控制,开启、关闭自动刷新以及刷新间隔时间.

$(function(){
        $(\'#controlRefresh\').click(function(){
        if($(this).val()=="关闭自动刷新"){
            $(this).val("开启自动刷新");
        }else{
            $(this).val("关闭自动刷新");
        }
    })
    $(\'#time\').change(function(){
        var time = $(this).val();
        setCookie(\'refreshTime\',time);
    })
})
function setCookie(name,value) {//两个参数,一个是cookie的名子,一个是值
    var Days = 30; //此 cookie 将被保存 30 天
    var date = new Date();    //new Date("December 31, 9998");
    date.setTime(date.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + date.toGMTString();
}

function getCookie(name) {//取cookies函数        
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr != null) return unescape(arr[2]); return null;
}    

需要注意的是:页面自动刷新,之前设置的值就没了,所以要用cookie保存在客户端

3.正主来了

function controlRefresh(ele)
{
    var eleTemp = $(\'#controlRefresh\').val();
    if(eleTemp=="开启自动刷新"){
        //var time = parseInt($(\'#time\').val())-4999;
        var time =     parseInt(getCookie(\'refreshTime\'))?parseInt(getCookie(\'refreshTime\'))-5000:10000;
        setTimeout(\'myrefresh()\',time);
    }
}
//执行刷新
function myrefresh()
{
    var eleTemp = $(\'#controlRefresh\').val();
    if(eleTemp=="开启自动刷新") window.location.reload();
}
setInterval(\'controlRefresh()\',5000);

 

分类:

技术点:

相关文章:

  • 2021-11-19
  • 2022-03-07
  • 2022-12-23
  • 2021-11-19
  • 2022-12-23
  • 2021-12-05
  • 2022-12-23
  • 2021-11-19
猜你喜欢
  • 2021-11-14
  • 2022-12-23
  • 2021-10-29
  • 2022-01-20
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案