您的位置:首页 > Web前端 > JavaScript

js控制页面自动刷新,可设置时间间隔

2013-01-30 09:12 741 查看
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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: