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

  • 网站教程
  • 编辑:烨模网
  • 时间:02/20
  • 阅读:2841

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

第一种:支持定时的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.yemowang.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.yemowang.com/index.php/hongxin/’;
// 以下方式定时跳转
setTimeout(“javascript:location.href=’https://www.yemowang.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.yemowang.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.yemowang.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网页跳转
优点:功能更全面,美观
缺点:一些浏览器可能需要手动点击跳转

<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
<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=46 style=”font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;”>

<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.yemowang.com/index.php/hongxin/”;}
}</script>
</p>
</form>
<p align=”center”> 如果您的浏览器不支持跳转,<a style=”text-decoration: none” href=”https://www.yemowang.com/page/15.html”><font color=”#FF0000″>请点这里</font></a>.</p>
</body>
</html>


方案一

<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="0.1;url=https://www.yemowang.com">
<title></title>
</head>
<body>
</body>
</html>

方案二

<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=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;">
  
  <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.yemowang.com";} 
}</script>
 </p>
</form>
<p align="center"> 如果您的浏览器不支持跳转,<a style="text-decoration: none" href="https://www.yemowang.com"><font color="#FF0000">请点这里</font></a>.</p>
</body>
</html>

 


推荐教程
  • 苹果MACCMSv10源码模板安装常见问题
  • 苹果MACCMSv10源码模板安装常见问题
  • 快速安装获得苹果CMS后,将其完整地部署到你的网站目录,然后访问网站,即可自动跳转到安装页面install.php。输入事先准备好的mysql数据库账户密码,即可一键安装。常见疑问JavaScript   1,由于采用最新的TP框架,所以
  • 苹果cmsv10教程
  • 来源:烨模网
  • 编辑:烨模网
  • 时间:02/20
  • 阅读:11045
  • 苹果cms开启vip会员收费权限教程
  • 苹果cms开启vip会员收费权限教程
  • 今天教小白开启下苹果cms会员收费设置会员VIP权限设置的教程,付费观看付费开启VIP会员权限。1,首先要在苹果cms后台开启会员模块,系统>>会员参数配置中开启会员模块,注册开关,注册状态。提示:开启后,如果你的网站模板有会员
  • 苹果cmsv10教程
  • 来源:烨模网
  • 编辑:烨模网
  • 时间:02/20
  • 阅读:19702
  • 苹果cmsv10搜索功能的开关与设置
  • 苹果cmsv10搜索功能的开关与设置
  • 今天有个小伙伴问了个关于苹果cms搜索的问题:直接搜演员搜索不到影片信息1,我们拿演员王宝强为案例:搜索王宝强后结果显示无相关视频。2,但是我们搜索王宝强主演的“大闹天竺”后却能得到关于王宝强的影片信息。这是为什么呢?3,其实
  • 苹果cmsv10教程
  • 来源:烨模网
  • 编辑:烨模网
  • 时间:02/20
  • 阅读:7774
  • 苹果CMSv10宝塔全自动定时采集教程
  • 苹果CMSv10宝塔全自动定时采集教程
  • 小伙伴们在建立好自己的网站添加自定义资源库后,由于手动采集方式比较耗时间和精力更新也不够及时,是不是特别希望能有一个全自动定时采集方法来帮助网站增加视频资源解放自己的双手,那么现在就教大家如何用宝塔一步一步实现这个定时采
  • 苹果cmsv10教程
  • 来源:烨模网
  • 编辑:烨模网
  • 时间:02/20
  • 阅读:3649
  • 马克斯CMS模板文件模板目录说明介绍
  • 马克斯CMS模板文件模板目录说明介绍
  • 模板目录的template文件夹马克斯模板文件都是在template文件夹下的主要模板有:head.html-----------全站模板页头foot.html-------------全站模板页脚index.html-----------网站首页模板channel.html--------影片列表页(分类页)模板co
  • 马克斯max教程
  • 编辑:烨模网
  • 时间:02/20
  • 阅读:3974
  • 模板推荐
买家指南 | 隐私条款 | 免责声明 | 联系我们 | 网站地图
CopyRight © 2026 烨模网yemowang.com 版权所有 | 所有模板仅供学习交流,请勿用于违法或商业用途