HTML页面定时跳转方法解析(2种任选)


Posted in Javascript onDecember 22, 2016

有 2 种方法可以实现 html 的定时页面跳转,1、meta refresh 实现。2、JavaScript 实现。

1、通过 meta refresh 实现 3 秒后自动跳转到 http://www.cnblogs.com/wuxibolgs329/ 页面。

<!doctype html>
 <html>
 <head>



<meta charset="utf-8">



<title>前端笔记</title>



<meta http-equiv="refresh" content="3;url=http://www.cnblogs.com/wuxibolgs329/">


</head>

<body>

</body>
</html>

2、通过 JavaScript 实现 8 秒后自动跳转到 http://www.cnblogs.com/wuxibolgs329/  页面。

<!doctype html>
<html>


<head>



<meta charset="utf-8">



<title>前端笔记</title>



<script type="text/javascript">




var time = 8; //时间,秒




function Redirect() {
 



window.location = "http://www.cssue.com/";




}




var i = 0;




function dis() {
 



document.all.s.innerHTML = "还剩" + (time - i) + "秒";
 



i++;




}




timer = setInterval('dis()', 1000); //显示时间




timer = setTimeout('Redirect()', time * 1000); //跳转



</script>

</head>

<body>


<span id="s"></span>

</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
JS敏感词过滤代码
Dec 23 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
详解vue v-model
Aug 31 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
使用refresh_token实现无感刷新页面
Apr 26 Javascript
vue双向绑定的简单实现
Dec 22 #Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 #Javascript
深入理解jquery中extend的实现
Dec 22 #Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 #Javascript
JS实现间歇滚动的运动效果实例
Dec 22 #Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 #Javascript
Bootstrap popover用法详解
Dec 22 #Javascript
You might like
模板引擎正则表达式调试小技巧
2011/07/20 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
浅谈django channels 路由误导
2020/05/28 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
老公给老婆的道歉信
2014/01/10 职场文书
房屋委托书范本
2014/04/04 职场文书
安全教育演讲稿
2014/05/09 职场文书
个人批评与自我批评
2014/10/15 职场文书
格林童话读书笔记
2015/06/30 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书