自动页面刷新通常会用在对数据的实时性比较敏感的网站中,比如股票走势等,另外在普通的页面自动跳转中也会使用到页面自动刷新技术。

页面刷新我见过的有三种方式,下面来一一说明

1、通过在<head>标签中添加<meta>标签来实现

 <meta http-equiv="Refresh" content="1";/>  <!--页面每1秒刷新一次-->
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /> <!--5秒钟后页面自动跳转到http://www.w3school.com.cn。这种跳转方式没有倒计时,不够友好-->

2、通过js来实现页面刷新或者跳转

 <script language="JavaScript">
function Refresh()
{
window.location.reload();
}
setTimeout('Refresh()',1000); //1秒刷新一次
</script>
<!--页面自动跳转js方式,这种方式没有跳转倒计时,不够友好-->
1 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript">
function goUrl()
{
var url="http://www.cnblogs.com/lihuibin";
location.href=url;
}
</script>
</head>
<body onload="setTimeout('goUrl()', 1000);"> <!--1秒钟后页面自动跳转到http://www.cnblogs.com/lihuibin-->
</body>
</html>

3、在实现倒计时自动跳转的时候,不提示倒计时会很不友好,所以现在对(2)中js倒计时方式做出以下修改

 <html>
<head>
<script type="text/javascript">
var t=10;
setInterval("refer()",1000);
function refer(){
if(t==0){
location.href="//www.cnblogs.com/lihuibin";
}
document.getElementById('show').innerHTML=""+t+"秒后跳转到小斌的博客";
t--;
}
</script>
<body>
<span id="show"></span>
</body>
</head>
</html>

总结:在定时跳转的时候,个人还是比较用第3中方式,因为这个方式会比较人性化。

实现html页面自动刷新的几种方式的更多相关文章

  1. 详解Grunt插件之LiveReload实现页面自动刷新(两种方案)

    http://www.jb51.net/article/70415.htm    含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以 ...

  2. html页面实现自动刷新的几种方法

    使用场景: 1. 页面需要定时刷新,实时加载数据(H5中的WebSocket和SSE可以实现局部刷新) 2. 一定时间之后跳转到指定页面(登录注册之类) 3. 前端开发使用伪数据调试html页面(修改 ...

  3. PHP 页面自动刷新可借助JS来实现,简单示例如下:

    <?php  echo "系统当前时间戳为:"; echo ""; echo time(); //<!--JS 页面自动刷新 --> echo ...

  4. 2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换

    2017春 前端自动化(二)   页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言:   此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生 ...

  5. 方法总结:如何实现html页面自动刷新

    使用场景: 1. 页面需要定时刷新,实时加载数据,需要实时查看监控数据(H5中的WebSocket和SSE可以实现局部刷新) 2. 一定时间之后跳转到指定页面(登录注册之类) 3. 前端开发使用伪数据 ...

  6. HTML 页面自动刷新

    学习就是一个不断积累的过程,每一天能够学到一点新东西说明自己就在进步!! HTML head 里面设置页面自动刷新功能 <meta http-equiv="Refresh" ...

  7. 如何设置页面自动刷新第一篇?? servlet setHeader("refresh","2")

    import java.io.IOException; import java.util.Random; import javax.servlet.ServletException; import j ...

  8. JAVA-JSP内置对象之response对象实现页面自动刷新

    相关资料:<21天学通Java Web开发> response对象 实现页面自动刷新1.可以通过response对象的addIntHeader()方法添加一个标题为Refrsh的标头,并指 ...

  9. html(对php也有效)页面自动刷新和跳转(简单版本)

    <html>    <head><title>html页面自动刷新和跳转</title><meta http-equiv="Refres ...

随机推荐

  1. halcon应用案例探究

    14.1  Access 1. get_region_chain 功能:一个对象的轮廓(contour)作为链式码. 2. get_region_contour 功能:查询一个目标的轮廓(contou ...

  2. Linux的rp_filter与策略路由

    Linux的rp_filter用于实现反向过滤技术,也即uRPF,它验证反向数据包的流向,以避免伪装IP攻击,但是它和Linux的策略路由却很容易发生冲突,其本质原因在于,uRPF技术强制规定了一个反 ...

  3. 解决vscode无法安装golang相关插件的问题 - 即无法直连golang.org的问题

    喜欢挂vpn或者代理的请无视本文. 其实golang.org上的插件在github.com上都有镜像,直接 git clone https://github.com/golang/tools git ...

  4. Vue之初识Vue

    前言 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维, 因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和 数据 ...

  5. OEL的下载

    https://edelivery.oracle.com 注意的是:第一次下载安装的时候需要首先安装installer.exe软件,然后再下载即可.

  6. 24小时学通Linux内核之向内核添加代码

    睡了个好觉,很晚才起,好久没有这么舒服过了,今天的任务不重,所以压力不大,呵呵,现在的天气真的好冷,不过实验室有空调,我还是喜欢待在这里,有一种不一样的感觉,在写了这么多天之后,自己有些不懂的页渐渐的 ...

  7. 微信小程序开发--富文本插件wxParse的使用

    昨天一位网友问我小程序怎么解析富文本.他尝试过把html转出小程序的组件,但是还是不成功,我说可以把内容剥离出来.但是这两种方法都是不行了.后来找到了wxParse-微信小程序富文本解析组件. 特性 ...

  8. C++学习 —— 重新认识C++

    我大概是从读研究生入学那天开始,想要学好C++的,学习C++几乎也成了我每个学期的计划之一.为什么会每个学期都想要学好C++呢?因为每次学习都失败了啊... 本月,我开始再Coursera上学习Het ...

  9. exception ‘PHPExcel_Calculation_Exception‘ with message ‘粉丝数据!C2679 -> Formula Error: Operator ‘=‘ has no operands

    导致问题原因可能是导出字段中包含有  ‘=’  ,解决办法:在字段前拼上一个半单引号. if(strpos($lists[$i-2][‘nickname‘],‘=‘) === 0){ $lists[$ ...

  10. pyqt4手动编写资源文件

    资源文件resource.qrc为XML格式,格式较简单,可以手动编辑: <!DOCTYPE RCC><RCC version="1.0"> <qre ...