实现html页面自动刷新的几种方式
自动页面刷新通常会用在对数据的实时性比较敏感的网站中，比如股票走势等，另外在普通的页面自动跳转中也会使用到页面自动刷新技术。
页面刷新我见过的有三种方式，下面来一一说明
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页面自动刷新的几种方式的更多相关文章
- 详解Grunt插件之LiveReload实现页面自动刷新（两种方案）
http://www.jb51.net/article/70415.htm 含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以 ...
- html页面实现自动刷新的几种方法
使用场景: 1. 页面需要定时刷新,实时加载数据(H5中的WebSocket和SSE可以实现局部刷新) 2. 一定时间之后跳转到指定页面(登录注册之类) 3. 前端开发使用伪数据调试html页面(修改 ...
- PHP 页面自动刷新可借助JS来实现，简单示例如下：
<?php echo "系统当前时间戳为:"; echo ""; echo time(); //<!--JS 页面自动刷新 --> echo ...
- 2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换
2017春 前端自动化(二) 页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言: 此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生 ...
- 方法总结：如何实现html页面自动刷新
使用场景: 1. 页面需要定时刷新,实时加载数据,需要实时查看监控数据(H5中的WebSocket和SSE可以实现局部刷新) 2. 一定时间之后跳转到指定页面(登录注册之类) 3. 前端开发使用伪数据 ...
- HTML 页面自动刷新
学习就是一个不断积累的过程,每一天能够学到一点新东西说明自己就在进步!! HTML head 里面设置页面自动刷新功能 <meta http-equiv="Refresh" ...
- 如何设置页面自动刷新第一篇?? servlet setHeader("refresh","2")
import java.io.IOException; import java.util.Random; import javax.servlet.ServletException; import j ...
- JAVA-JSP内置对象之response对象实现页面自动刷新
相关资料:<21天学通Java Web开发> response对象 实现页面自动刷新1.可以通过response对象的addIntHeader()方法添加一个标题为Refrsh的标头,并指 ...
- html（对php也有效）页面自动刷新和跳转（简单版本）
<html> <head><title>html页面自动刷新和跳转</title><meta http-equiv="Refres ...
随机推荐
- redis 集群搭建碰到的问题
make PREFIX=/usr/local/redis install把编译好的redis 安装到指定目录下. redis.conf文件从源码目录拷贝到/usr/local/redis(安装目录)下 ...
- php -- 类对象调用静态方法
以前一直以为 静态方法的调用:类名::静态方法 非静态方法的调用:类对象->非静态方法 最近研究一个类,发现一个比较奇怪的问题,用“类对象->静态方法”这种方式居然成功的调用了静态方法.很 ...
- java.lang.NoClassDefFoundError: javax/annotation/Priority
异常内容: 2017-09-25-15-02 [localhost-startStop-1] [org.springframework.web.context.ContextLoader] [ERRO ...
- 使用docker安装mysql服务
使用docker官方镜像安装mysql服务 1 拉取mysql镜像,采用网易加速地址 docker pull hub.c.163.com/library/mysql:5.7 2 重命名镜像名 dock ...
- 【BZOJ4025】二分图
Description 神犇有一个n个节点的图.由于神犇是神犇,所以在T时间内一些边会出现后消失.神犇要求出每一时间段内这个图是否是二分图.这么简单的问题神犇当然会做了,于是他想考考你. Input ...
- Java 8 时间日期
啦啦啦 package lime.java1_8.time; import java.time.*; import java.time.format.DateTimeFormatter; import ...
- Orders matters: seq2seq for set 实验
论文提出了input的顺序影响seq2seq结果 有一些输入本身是无序的怎么去处理呢 作者提出LSTM controller的方式 替代输入的LSTM encode方式 作者实验这种方 ...
- Reading List on Automated Program Repair
Some resources: https://www.monperrus.net/martin/automatic-software-repair 2017 [ ] DeepFix: Fixing ...
- LeetCode - 868. Binary Gap
Given a positive integer N, find and return the longest distance between two consecutive 1's in the ...
- 使用cmd导入导出oracle数据库dmp文件
exp scott/test@192.168.0.195/orcl file=C:\Users\zz\Desktop\1\gd_base.dmp log=C:\Users\zz\Desktop\1\g ...