本篇文章由笑清风博客主要介绍网页meta标签html等待5秒自动跳转代码、倒计时5秒自动跳转javascript代码
、以及三款带进度条的自动跳转javascript代码。
一：网页meta标签等待5秒自动跳转代码，这是最简便的自动跳转代码。其中
content="5;url=http://www.xqf01.com"，“5”是时间参数，可以自行修改。
<html>
<head>
<meta http-equiv="Content-Language" content="zh-CN">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<meta http-equiv="refresh" content="5;url=http://www.xqf01.com">
<title>正在跳转到笑清风博客</title>
</head>
<body>
</body>
</html>
二：倒计时5秒自动跳转javascript代码
<html>
<head><title>正在跳转到笑清风博客</title>
<script language='javascript' type='text/javascript'>
var secs =5; //倒计时的秒数
var URL ;
function Load(url){
URL =url;
for(var i=secs;i>=0;i--)
{
window.setTimeout('doUpdate(' + i + ')', (secs-i) * 1000);
}
}
function doUpdate(num)
{
document.getElementById('ShowDiv').innerHTML = '将在'+num+'秒后自动跳转到笑清风博客' ;
if(num == 0) { window.location=URL; }
}
</script>
</head>
<body>
<div id="ShowDiv"></div>
<script language="javascript">
Load("http://www.xqf01.com");
</script>
</body>
</html>
三：带进度条的自动跳转javascript代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>自动跳转到笑清风博客</title>
</head>
<body>
<form name=loading>
<p align=center> <font color="#0066ff" size="2">正在自动跳转到笑清风博客，请稍等
</font><font color="#0066ff" size="2" face="Arial">...</font>
<input type=text name=chart size=56 style="font-family:Arial; font-weight:bolder;
color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;">
<input type=text name=percent size=56 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 = "http://www.xqf01.com";}
}</script>
</p>
</form>
<p align="center"> 如果您的浏览器不支持跳转,<a style="text-decoration: none"
href="http://www.xqf01.com"><font color="#FF0000">请点这里</font></a>.</p>
</body>
</html>
四：带进度条的自动跳转javascript代码
<html>
<head>
<script language="javascript">
function setTz(v, el) {
var ie5 = (document.all && document.getElementsByTagName);
if (ie5 || document.readyState == "complete") {
filterEl = el.children[0];
valueEl = el.children[1];
filterEl.style.width = v + "%";
valueEl.innerText = v + "%";
}
}
function fakeProgress(v, el) {
if (v > 100)
location.href = "http://www.xqf01.com";
else {
setTz(v, el);
window.setTimeout("fakeProgress(" + (++v) + ", document.all['" + el.id + "'])", 100);
}
}
</SCRIPT>
</head>
<body onload="fakeProgress(0, tz)" topmargin=180 bgcolor=#CCCCCC>
<center>
<p align=center style="font-szie:9pt; line-height: 100%">正在进入笑清风博客，请稍侯……</p>
<span id=tz style="width: 500px">
<div style="height:22px;filter: Alpha(Opacity=0, FinishOpacity=60, style=1, StartX=0,
StartY=0, FinishX=100, FinishY=0); width: 0%; position: absolute; background:
#9999ff"></div>
<div style="height:22px;position: absolute;font-size: 14px; line-height:22px; width: 100%;
color: #ff3333; font-family: arial; text-align: center"></div>
</span>
</center>
</body>
</html>
五：带进度条的自动跳转javascript代码
<html>
<head>
<title>正在进入笑清风博客，请稍侯</title>
<SCRIPT type=text/javascript>
var ie5 = (document.all && document.getElementsByTagName);
var step = 0;
function setTZ(v, el, inforEl, message) {
if (ie5 || document.readyState == "complete") {
filterEl = el.children[0];
valueEl = el.children[1];
if (filterEl.style.pixelWidth > 0) {
var filterBackup = filterEl.style.filter;
filterEl.style.filter = "";
filterEl.style.filter = filterBackup;
}
filterEl.style.width = v + "%";
valueEl.innerText = v + "%";
inforEl.innerText = message;
}
}
function setTZByStep(v, el, inforEl, message) {
if (ie5 || document.readyState == "complete") {
step = step + v;
filterEl = el.children[0];
valueEl = el.children[1];
if (filterEl.style.pixelWidth > 0) {
var filterBackup = filterEl.style.filter;
filterEl.style.filter = "";
filterEl.style.filter = filterBackup;
}
filterEl.style.width = step + "%";
valueEl.innerText = step + "%"
inforEl.innerText = message;
}
}
function fakeProgress(v, el) {
if (v >= 101)
location.href="http://www.xqf01.com";
else {
setTZ(v, el, infor, "正在进入笑清风博客，请稍候...");
window.setTimeout("fakeProgress(" + (v + 1) + ", document.all['" + el.id + "'])", 100);
}
}
</SCRIPT>
</head>
<body bgcolor=#f9f9f9 topmargin=100 onload=fakeProgress(0,TZ)>
<div align=center>
<div id=TZ style="border-right: #ffffff 1px solid; border-top: #ffffff 1px solid;
background: #99ccff; border-left: medium none; width: 400px; border-bottom: #cccccc 1px
solid; height: 16px; text-align: left">
<div id=TZchild1 style="filter: alpha(opacity=0, finishopacity=80, style=1, startx=0,
starty=0, finishx=100, finishy=0); overflow: hidden; text-align:center; position: absolute;
height: 16px">
<div style="background: #000000; width: 100% ;"></div>
</div>
<div style="font-size: 16px; width: 400px; color: white; font-family: arial; position:
absolute; height: 16px; text-align: center;"></div>
</div>
<p></p>
<div id=infor style="font-size: 14px; color: #999999; font-family: arial; position:
relative; height: 14px; letter-spacing:1; text-align: center"></div>
</div>
</body>
</html>
常用的meta标签和javascript网页自动跳转代码
- 版权所属：笑清风的个人随笔
- 文章作者：笑清风
- 本文地址：https://www.xqf01.com/158.html
- 版权声明：原创文章，转载时必须以链接形式注明原始出处及本声明。
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。