原创

HTML + JavaScript 实现页面自动跳转方式总结

HTML 超级文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下:

1)简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便。

2)可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。

3)平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。

4)通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

HTML + JavaScript 实现页面自动跳转方式,5秒后自动跳转到同目录下的 yoodb.html 页面,总结如下:

1.HTML 页面实现,(注意: title 无法使用),具体代码如下:

<head> 
<meta http-equiv="refresh" content="5;url=yoodb.html"> 
</head>

 

2.JavaScript 实现,灵活可以结合其他功能,但是收到浏览器的兼容问题具体代码如下:

<script language="javascript" type="text/javascript">
<!-- 
setTimeout("javascript:location.href='http://www.yoodb.com/yoodb.html'", 5000); 
// -->
</script>

3.JavaScript 结合倒数实现,兼容IE但是不兼容firefox,具体代码如下:

<div id="beginSecond">5</div> 
<script language="javascript" type="text/javascript">
<!-- 
var second = beginSecond.innerText; 
setInterval("redirect()", 1000); 
function redirect(){ 
beginSecond.innerText=--second; 
if(second<0){
location.href='http://www.yoodb.com/yoodb.html'; 
}
} 
// --></script>

4.JavaScript 结合倒数实现,兼容firefox,具体代码如下:

<div id="beginSecond">5</div> 
<script language="javascript" type="text/javascript">
<!-- 
var second =  document.getElementById('beginSecond').textContent;
setInterval("redirect()", 1000); 
function redirect(){ 
document.getElementById('beginSecond').textContent=--second; 
if(second<0){
location.href='http://www.yoodb.com/yoodb.html'; 
}
} 
// --></script>

5.JavaScript 结合倒数实现,兼容IE 和兼容 firefox 浏览器,具体代码如下:

<span id="beginSecond">5</span> 
<script language="javascript" type="text/javascript">
<!-- 
var second = document.getElementById('beginSecond').textContent; 
if (navigator.appName.indexOf("Explorer") > -1) { 
second = document.getElementById('beginSecond').innerText; 
} else { 
second = document.getElementById('beginSecond').textContent; 
} 
setInterval("redirect()", 1000); 
function redirect() { 
if (second < 0) { 
location.href='http://www.yoodb.coom/yoodb.html'; 
} else { 
if (navigator.appName.indexOf("Explorer") > -1) { 
document.getElementById('beginSecond').innerText = second--; 
} else { 
document.getElementById('beginSecond').textContent = second--; 
} 
} 
} 
// -->
</script>
~阅读全文~人机检测~

关注下方微信公众号“Java精选”(w_z90110),回复关键词领取资料:如Mysql、Hadoop、Dubbo、Spring Boot等,免费领取视频教程、资料文档和项目源码。

Java精选专注程序员推送一些Java开发知识,包括基础知识、各大流行框架(Mybatis、Spring、Spring Boot等)、大数据技术(Storm、Hadoop、MapReduce、Spark等)、数据库(Mysql、Oracle、NoSQL等)、算法与数据结构、面试专题、面试技巧经验、职业规划以及优质开源项目等。其中一部分由小编总结整理,另一部分来源于网络上优质资源,希望对大家的学习和工作有所帮助。

评论

分享:

支付宝

微信