常用网页自动跳转实现代码网页自动跳转代码html

很多站长都会用网页自动跳转来实现一些功能，本文整理五个网页自动跳转的方法来分享给大家，他们都能实现在指定时间后自动跳转到所需要的网页或链接的功能。

第一种：支持定时的html网页跳转
优点：简单
缺点：在Struts Tiles框架中无法使用

<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
<!– 以下方式只是3秒后刷新不跳转到其他页面 –>
<meta http-equiv=”refresh” content=”3″>
<!– 以下方式为定时3秒后跳转到其指定页面 –>
<meta http-equiv=”refresh” content=”3;url=https://www.m1938.com/index.php/hongxin/”>
</head>
<body>
//注意：以上两种无法同时使用
</body>
</html>

第二种：支持定时的javascript网页跳转
优点：灵活，可以结合更多的其他功能
缺点：会因浏览器不同而受到影响

<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
</head>
<body>
<script language=”javascript” type=”text/javascript”>
// 以下方式直接跳转
window.location.href=’https://www.m1938.com/index.php/hongxin/’;
// 以下方式定时跳转
setTimeout(“javascript:location.href=’https://www.m1938.com/index.php/hongxin/'”, 5000);
</script>

//注意：以上两种无法同时使用
</body>
</html>

第三种：javascript实现简单的网页跳转
优点：简单，快速
缺点：可制定性不强

<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
</head>
<body>
<script language=’javascript’>document.location = ‘https://www.m1938.com/index.php/hongxin/'</script>
</body>
</html>

第四种：结合了倒数功能的javascript网页跳转
优点：更人性化
缺点：不支持span、div等 innerText属性的浏览器无法使用。

<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
</head>
<body>
<span id=”totalSecond”>3</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 = ‘https://www.m1938.com/index.php/hongxin/’;
} else {
if (navigator.appName.indexOf(“Explorer”) > -1) {
document.getElementById(‘totalSecond’).innerText = second–;
} else {
document.getElementById(‘totalSecond’).textContent = second–;
}
}
}
</script>
</body>
</html>

第五种：经过简单美化的javascript网页跳转
优点：功能更全面，美观
缺点：一些浏览器可能需要手动点击跳转

<input type=text name=percent size=47 style=”color:#0066ff; text-align:center; border-width:medium; border-style:none;”>
<script>
var bar=0
var line=”||”
var amount=”||”
count()
function count(){
bar=bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+”%”
if (bar<99)
{setTimeout(“count()”,100);}
else
{window.location = “https://www.m1938.com/index.php/hongxin/”;}
}</script>
</p>
</form>
<p align=”center”> 如果您的浏览器不支持跳转,<a style=”text-decoration: none” href=”https://www.m1938.com/page/15.html”><font color=”#FF0000″>请点这里</font></a>.</p>
</body>
</html>

方案一

方案二