好友团

24小时服务电话

134-2860-6060

查看: 2675|回复: 1

[综合教程] 常用网页自动跳转实现代码 网页自动跳转代码html

[复制链接]
发表于 2017-11-5 22:42:10 | 显示全部楼层 |阅读模式
填写您的邮件地址,订阅我们的精彩内容:
[受理编号:SL-2630]
填写您的邮件地址,订阅我们的精彩内容:

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

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

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

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

  1. <html>
  2. <head>
  3. <meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
  4. </head>
  5. <body>
  6. <script language=”javascript” type=”text/javascript”>
  7. // 以下方式直接跳转
  8. window.location.href=’http://www.m1938.com/index.php/hongxin/’;
  9. // 以下方式定时跳转
  10. setTimeout(“javascript:location.href=’http://www.m1938.com/index.php/hongxin/'”, 5000);
  11. </script>
  12. //注意:以上两种无法同时使用
  13. </body>
  14. </html>
复制代码

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

  1. <html>
  2. <head>
  3. <meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
  4. </head>
  5. <body>
  6. <script language=’javascript’>document.location = ‘http://www.m1938.com/index.php/hongxin/'</script>
  7. </body>
  8. </html>
复制代码

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

  1. <html>
  2. <head>
  3. <meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
  4. </head>
  5. <body>
  6. <span id=”totalSecond”>3</span>秒后自动跳转
  7. <script language=”javascript” type=”text/javascript”>
  8. var second = document.getElementById(‘totalSecond’).textContent;
  9. if (navigator.appName.indexOf(“Explorer”) > -1) {
  10. second = document.getElementById(‘totalSecond’).innerText;
  11. } else {
  12. second = document.getElementById(‘totalSecond’).textContent;
  13. }
  14. setInterval(“redirect()”, 1000);
  15. function redirect() {
  16. if (second < 0) {
  17. location.href = ‘http://www.m1938.com/index.php/hongxin/’;
  18. } else {
  19. if (navigator.appName.indexOf(“Explorer”) > -1) {
  20. document.getElementById(‘totalSecond’).innerText = second–;
  21. } else {
  22. document.getElementById(‘totalSecond’).textContent = second–;
  23. }
  24. }
  25. }
  26. </script>
  27. </body>
  28. </html>
复制代码

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

  1. <html>
  2. <head>
  3. <meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
  4. <title>正在进入</title>
  5. </head>
  6. <body>
  7. <form name=loading>
  8. <p align=center> <font color=”#0066ff” size=”2″>正在进入,请稍等</font><font color=”#0066ff” size=”2″ face=”Arial”>…</font>
  9. <input type=text name=chart size=46 style=”font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;”>
  10. <input type=text name=percent size=47 style=”color:#0066ff; text-align:center; border-width:medium; border-style:none;”>
  11. <script>
  12. var bar=0
  13. var line=”||”
  14. var amount=”||”
  15. count()
  16. function count(){
  17. bar=bar 2
  18. amount =amount line
  19. document.loading.chart.value=amount
  20. document.loading.percent.value=bar ”%”
  21. if (bar<99)
  22. {setTimeout(“count()”,100);}
  23. else
  24. {window.location = “http://www.m1938.com/index.php/hongxin/”;}
  25. }</script>
  26. </p>
  27. </form>
  28. <p align=”center”> 如果您的浏览器不支持跳转,<a style=”text-decoration: none” href=”http://www.m1938.com/page/15.html”><font color=”#FF0000″>请点这里</font></a>.</p>
  29. </body>
  30. </html>
复制代码

方案一

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Language" content="zh-CN">
  4. <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
  5. <meta http-equiv="refresh" content="0.1;url=http://www.m1938.com">
  6. <title></title>
  7. </head>
  8. <body>
  9. </body>
  10. </html>
复制代码

方案二

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>正在进入</title>
  5. </head>
  6. <body>
  7. <form name=loading>
  8.  <p align=center> <font color="#0066ff" size="2">正在进入,请稍等</font><font color="#0066ff" size="2" face="Arial">...</font>
  9.   <input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;">
  10.   
  11.   <input type=text name=percent size=47 style="color:#0066ff; text-align:center; border-width:medium; border-style:none;">
  12.   <script> 
  13. var bar=0 
  14. var line="||" 
  15. var amount="||" 
  16. count() 
  17. function count(){ 
  18. bar=bar 2 
  19. amount =amount line 
  20. document.loading.chart.value=amount 
  21. document.loading.percent.value=bar "%" 
  22. if (bar<99) 
  23. {setTimeout("count()",100);} 
  24. else 
  25. {window.location = "http://www.m1938.com";} 
  26. }</script>
  27.  </p>
  28. </form>
  29. <p align="center"> 如果您的浏览器不支持跳转,<a style="text-decoration: none" href="http://www.m1938.com"><font color="#FF0000">请点这里</font></a>.</p>
  30. </body>
  31. </html>
复制代码

销售站一体化商城分享:www.xiaoshouzhan.com


回复
〖销售站〗一站式品质服务平台. 一体化商城系统.【www.xiaoshouzhan.com】

0

主题

1

帖子

21

积分

新手上路

Rank: 1

积分
21
发表于 2019-10-25 19:42:14 | 显示全部楼层
填写您的邮件地址,订阅我们的精彩内容:

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

填写您的邮件地址,订阅我们的精彩内容:
I apologise, but, in my opinion, you commit an error. Write to me in PM, we will talk.
回复
一站式品质服务平台.一体化商城系统--www.xiaoshouzhan.com
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

销售站-一体化商城系统!
 
 
Q Q|技术部
销售|销售部
客服|销售站实体店
分流|销售站实体店
视频解析群:
好记吧
产品售后群:
站长源码(交易平台)
域名拍卖群:
域名拍卖群
产品维权群:
藤县站
微信客服中心:
/images/niwota00000000300.jpg
工作时间:
8:00-18:00
 
版权所有:好友团

QQ|关于我们|手机版|( 桂ICP备19008987号|网站地图  | Sponsor: Friends group