HTML页面定时跳转方法

1)html的实现

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

优点:简单

缺点:Struts Tiles中无法使用

2)javascript的实现

<script language="javascript" type="text/javascript">
setTimeout("javascript:location.href=‘hello.html‘", 5000);
</script>

优点:灵活,可以结合更多的其他功能

缺点:受到不同浏览器的影响

3)结合了倒数的javascript实现(IE)

<span id="totalSecond">5</span>

<script language="javascript" type="text/javascript">
var second = totalSecond.innerText;
setInterval("redirect()", 1000);
function redirect(){
totalSecond.innerText=--second;
if(second<0) location.href=‘hello.html‘;
}
</script>

优点:更人性化

缺点:firefox不支持(firefox不支持span、div等的innerText属性)

3‘)结合了倒数的javascript实现(firefox)

<script language="javascript" type="text/javascript">
var second = document.getElementById(‘totalSecond‘).textContent;
setInterval("redirect()", 1000);
function redirect()
{
document.getElementById(‘totalSecond‘).textContent = --second;
if (second < 0) location.href = ‘hello.html‘;
}
</script>

4)解决Firefox不支持innerText的问题

<span id="totalSecond">5</span>

<script language="javascript" type="text/javascript">
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById(‘totalSecond‘).innerText = "my text innerText";
} else{
document.getElementById(‘totalSecond‘).textContent = "my text textContent";
}
</script>

5)整合3)和3‘)

<span id="totalSecond">5</span>

<script language="javascript" type="text/javascript">
var second = document.getElementById(‘totalSecond‘).textContent;
if (navigator.appName.indexOf("Explorer") > -1)
{
second = document.getElementById(‘totalSecond‘).innerText;
} else
{
second = document.getElementById(‘totalSecond‘).textContent;
}
setInterval("redirect()", 1000);
function redirect()
{
if (second < 0)
{
location.href = ‘hello.html‘;
} else
{
if (navigator.appName.indexOf("Explorer") > -1)
{
document.getElementById(‘totalSecond‘).innerText = second--;
} else
{
document.getElementById(‘totalSecond‘).textContent = second--;
}
}
}
</script>

 

本文摘自:http://blog.163.com/ai_zxc/blog/static/4621272010059380438/

 

 

我实验了  “5)整合3)和3‘)” 如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
  <span id="totalSecond">5</span>
 </BODY>

<script language="javascript" type="text/javascript">
var second = document.getElementById(‘totalSecond‘).textContent; 

if (navigator.appName.indexOf("Explorer") > -1)
{
second = document.getElementById(‘totalSecond‘).innerText;
} else
{
second = document.getElementById(‘totalSecond‘).textContent;
} 

setInterval("redirect()", 1000);
function redirect()
{
if (second < 0)
{
location.href = ‘http://www.baidu.com/‘;
} else
{
if (navigator.appName.indexOf("Explorer") > -1)
{
document.getElementById(‘totalSecond‘).innerText = second--;
} else
{
document.getElementById(‘totalSecond‘).textContent = second--;
}
}
}
</script>
</HTML>
时间: 2024-11-01 23:01:48

HTML页面定时跳转方法的相关文章

记录各种页面定时跳转方法(倒计时跳转总结)

下面对实现页面定时跳转(也称倒计时跳转)做一下总结,各种定时跳转代码记录如下: (1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内) 代码如下: <script type="text/javascript"> //3秒钟之后跳转到指定的页面 setTimeout(window.location.href='http://www.balijieji.com',3); </script> (2)html代码实现,在页面的head区域块内加上

[转]js实现页面定时跳转

其实很简单的一件事情,使用js提供的setTimeout()函数则可以完成了. 下面是简单的代码实现: [html] view plaincopy <html> <head></head> <body> <h1>提交成功</h1> <a href="http://www.so.com">3秒后系统会自动跳转,也可点击本处直接跳</a> </div></div><

[javascript]各种页面定时跳转(倒计时跳转)代码总结

(1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内) 1 <script type="text/javascript"> 2 //3秒钟之后跳转到指定的页面 3 setTimeout(window.location.href='http://www.baidu.com',3); 4 </script> (2)html代码实现,在页面的head区域块内加上如下代码 1 <!--5秒钟后跳转到指定的页面--> 2 <met

各种页面定时跳转(倒计时跳转)代码总结

一.使用setTimeout函数实现定时跳转(如下代码要写在body区域内) <script type="text/javascript"> //3秒钟之后跳转到指定的页面 setTimeout(window.location.href='http://www.baidu.com',3); </script> 或者: <script language="JavaScript" type="text/javascript&quo

页面链接跳转方法

一.window.location.href 是实现页面链接跳转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浏览器对象</title> <style> div{ width: 500px; margin:0 auto; } </style> </head> <

jsp页面的跳转方法另类总结

在Jsp页面中除了可以使用超链接跳转页面以外,还可以使用表单的方法跳转页面,例如下面的例子,test2页面跳转到test1页面: test2.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getSch

页面定时跳转

1.html <span id="show"></span> 2.js <script type="text/javascript"> var t=10;//设定跳转的时间 setInterval("refer()",1000); //启动1秒定时 function refer(){ if(t==0){ location="http://www.daimajiayuan.com/sitejs-1725

JavaScript访问ab页面定时跳转代码

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 </head> 8 <body> 9 10 </body> 11 <script type='text/javascript'> 12 functi

javascript页面定时跳转

<body>    <p>操作成功!</p>    <p><span id="time"></span>秒,自动返回主页,<a href="https://www.baidu.com/">返回</a></p>    <script>    function time_back(time_s,url_s){        var time_num=