`
web001
  • 浏览: 98223 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

JavaScript实现x秒后自动跳转

javascript网站建设 
阅读更多

今天看视频学习时学习了一种新技术，即平时我们在一个页面点击“提交”或“确认”会自动跳转到一个页面。

在网上搜了一下，关于这个技术处理有多种方法，我只记下我在视频里学到的三种：

1、用一个response.sendRedirect("目标页面.jsp\.htm");实现直接跳转；

2、有时我们需要有点提示,比如“x秒后自动跳转，若没有跳转，请点击此处”，则可以在myeclipse中调用Snippets中的Delay Go To URL.会自动生成如下代码：

 

Js代码  收藏代码
  1. <script language="JavaScript1.2" type="text/javascript">  
  2. <!--  
  3. //  Place this in the 'head' section of your page.    
  4. function delayURL(url, time) {  
  5.     setTimeout("top.location.href='" + url + "'", time);  
  6. }  
  7. //-->  
  8. </script>  
  9.   
  10. <!-- Place this in the 'body' section -->  
  11. <a href="javascript:" onClick="delayURL('myPage.html','2000')">My Delayed Link</a>   

 

将此代码修改为：

 

 

Js代码  收藏代码
  1. <script language="JavaScript1.2" type="text/javascript">  
  2. function delayURL(url, time) {  
  3. setTimeout("top.location.href='" + url + "'", time);  
  4. }  
  5. </script>  
  6. <span id="time" style="background: red">3</span>  
  7. 秒钟之后自动跳转，如果不跳转，请点击下面链接  
  8. <a href="目标页面.jsp">目标页面</a>  
  9. <script type="text/javascript">  
  10. delayURL("http://www.hualai.net.cn", 3000);  
  11. </script>   

 

然后将在3秒钟之后直接跳转到“目标页面”。这种方法就是设定几秒钟后跳转则在这过程中页面不会有变化，比如说设定3秒，然后随着时间的变化3变成2再变成1直至跳转，下面请看第三种方法。

 

3、把方法2中的代码修改为：

 

 

Js代码  收藏代码
  1. <script language="JavaScript1.2" type="text/javascript">  
  2. function delayURL(url) {  
  3.    var delay=document.getElementById("time").innerHTML;  
  4.    //最后的innerHTML不能丢，否则delay为一个对象  
  5.    if(delay>0){  
  6.    delay--;  
  7.    document.getElementById("time").innerHTML=delay;  
  8.    }else{  
  9.    window.top.location.href=url;  
  10.    }  
  11. setTimeout("delayURL('" + url + "')", 1000);  
  12. //此处1000毫秒即每一秒跳转一次  
  13. }  
  14. </script>  
  15. <span id="time" style="background: red">3</span>  
  16. 秒钟之后自动跳转，如果不跳转，请点击下面链接  
  17. <a href="目标页面.jsp">主题列表</a>  
  18. <script type="text/javascript">  
  19. delayURL("http://www.hualai.net.cn/news/knowledge/265.html");  
  20. </script>   

 

此方法实现的效果为在上一个页面点击完submit后跳转到本页面经过3秒（这个3会递减到0）后跳转到目标页面。

3
顶
4
踩
分享到：
| 网站开发人员应该学习点jQuery的6大理由
评论
6 楼 web001 2012-08-10  
witcheryne 写道
我的3年前的文章
http://witcheryne.iteye.com/admin/blogs/319119

我访问不了这个地址，可能是你的管理地址吧，里面有admin，提供给我一个正确的地址，我把链接加上。
5 楼 witcheryne 2012-08-09   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>err.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script src="scripts/jQuery/jquery.js" type="text/javascript"></script>
	<script language="javascript">
		$(document).ready(function() {
			function jump(count) {
				window.setTimeout(function(){
					count--;
					if(count > 0) {
						$('#num').attr('innerHTML', count);
						jump(count);
					} else {
						location.href="login.jsp";
					}
				}, 1000);
			}
			jump(3);
		});
	</script>
  </head>
  
  <body>
   	失败...<br />
   	3秒后自动跳转。当前还剩<span id="num">3</span>秒
  </body>
</html>
4 楼 witcheryne 2012-08-09  
我的3年前的文章
http://witcheryne.iteye.com/admin/blogs/319119
3 楼 jinnianshilongnian 2012-08-09  
web001 写道
jinnianshilongnian 写道
可以直接使用

<meta http-equiv="Refresh" content="5;url=http://sishuok.com">

表示5秒后跳转到私塾在线学习网

可能题目误解了，我想实现“5秒自动跳转，如果没有跳转，点击这里手动跳转”


哦 呵呵，其实一样啊，   如果不需要倒计时的形式可以用meta头Refresh代替
2 楼 web001 2012-08-09  
jinnianshilongnian 写道
可以直接使用

<meta http-equiv="Refresh" content="5;url=http://sishuok.com">

表示5秒后跳转到私塾在线学习网

可能题目误解了，我想实现“5秒自动跳转，如果没有跳转，点击这里手动跳转”
1 楼 jinnianshilongnian 2012-08-09  
可以直接使用

<meta http-equiv="Refresh" content="5;url=http://sishuok.com">

表示5秒后跳转到私塾在线学习网
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript实现x秒后自动跳转到一个页面

    这里我们将详细探讨三种通过JavaScript实现x秒后自动跳转到一个页面的方法。 1. **直接使用`response.sendRedirect()`**： 这个方法通常在服务器端使用，例如在Java的Servlet中。`response.sendRedirect()`函数...

    HTML页面3秒后自动跳转的三种常见方法

    在网页开发中，有时我们需要实现页面在特定时间后自动跳转到另一个页面的功能。这里将详细解释HTML页面3秒后自动跳转的三种常见方法。 方法1：使用`&lt;meta&gt;`标签 这种方法是最简单直接的，它通过在HTML文档的`&lt;head&gt;...

    javascript秒数倒计时自动跳转代码

    ### JavaScript 秒数倒计时自动跳转代码详解 #### 一、背景介绍与应用场景 在Web开发中，倒计时功能非常常见，比如在活动页面进行活动倒计时、登录后的页面跳转提示等场景。JavaScript作为一种浏览器端执行的脚本...

    在django中实现页面倒数几秒后自动跳转的例子

    在了解如何在Django框架中实现页面倒数几秒后自动跳转之前，我们需要了解Django框架的基本概念和其工作原理。Django是一个高级的Python Web框架，鼓励快速开发和干净、实用的设计。它负责管理网站的基础设施，从路由...

    手机访问网站自动跳转到手机版代码.rar

    "手机访问网站自动跳转到手机版代码"这个压缩包中包含的代码就是实现这一功能的关键。以下将详细解释这个功能的工作原理以及实现方法。 1. **浏览器检测**： 自动跳转到手机版通常基于浏览器的User-Agent字符串...

    网页跳转代码大全

    （3秒钟后自动跳转到www admin5 com） 以上三种是也比较常见 比较常用的网页跳转代码运行平台Win9x WinNT Win2000 WinME WinXP 二 几段简单的网页跳转代码 不隐藏转向之后的地址 代码一："&gt;一 三种网页跳转代码：...

    网页跳转代码

    这段代码的意思是：当前页面将在1秒后自动跳转至`http://www.baidu.com/`。 - **`http-equiv="refresh"`**：这里指定了`http-equiv`属性的值为`refresh`，告诉浏览器这是一个刷新指令。 - **`content="1;URL=...

    通过安装安卓端的autox.js，执行本项目的脚本，实现自动监测大麦，自动演唱会门票.zip

    本文将深入探讨如何通过安装安卓端的`autox.js`来执行项目脚本，实现在大麦网上自动监测并抢购演唱会门票。 首先，我们需要了解`autox.js`。`AutoX`是一款基于JavaScript的安卓自动化工具，它允许用户编写脚本来...

    一款让弹出的网站进行跳转到自己想要的网站上

    标题中的“一款让弹出的网站进行跳转到自己想要的网站上”指的是一个软件或技术，它允许用户控制浏览器的弹出窗口，使其自动跳转到预设的特定网址，而不是原本会打开的页面。这通常涉及到网页编程和网络请求的重定向...

    海洋seacms中超酷ckplayer自动下一集代码。

    当`onended`事件触发时，我们可以编写JavaScript代码来实现自动加载并播放下一集视频。 以下是一种可能的实现方式： 1. 首先，你需要获取到当前播放视频的序列号或者URL，这通常可以通过CKPlayer提供的API如`...

    VS2010代码自动补全插件Visual_Assist_X_10.6.1856.rar

    4. **导航与查找**：Visual Assist X提供了强大的导航工具，如“Go To Definition”（跳转到定义）、“Find Usages”（查找使用），以及“Navigate Backward/Forward”（前后跳转），这些功能使得在大型项目中定位...

    网页javascript常用代码收藏

    例如，上面的例子表示在8秒后自动跳转到`http://www.liqun.net`。 ### 5. 屏幕全屏显示 ```javascript &lt;script language="javascript"&gt; &lt;!--Begin self.moveTo(0, 0); self.resizeTo(screen.availWidth, screen...

    php跳转类 model

    if($asc&gt;=-12556 and $asc)return "X"; if($asc&gt;=-11847 and $asc)return "Y"; if($asc&gt;=-11055 and $asc)return "Z"; return null; } //查找 public function getAll($table='',$where=array(),$select=''){ ...

    JavaScript色影无忌三屏flash焦点图，调用灵活，图片尺寸：374x237

    在这个"JavaScript色影无忌三屏flash焦点图，调用灵活，图片尺寸：374x237"的项目中，我们看到的是一个利用JavaScript实现的多图片展示功能，特别适用于网站的首页或产品展示区域，以吸引用户的注意力并提供良好的...

    js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能

    但是，可以通过设置URL Scheme（如alipay://）来尝试打开支付宝，如果用户已经安装了支付宝APP，那么会自动跳转。 - **Android**：对于Android，JavaScript可以调用默认浏览器，然后浏览器会提示用户是否打开支付宝...

    Javascript倒计时（定时）执行跳转事件的代码

    在Web开发中，倒计时常常用于实现倒计时跳转功能，例如在活动页面上设置一段时间后自动跳转到另一个页面。实现倒计时功能，最常用的方法是通过JavaScript中的定时器函数来完成。 2. JavaScript定时器函数 ...

    javascript 自动转到命名锚记

    要使用JavaScript自动跳转到这个锚记，可以使用 `window.location.hash` 属性。这个属性返回或设置当前URL的片段标识符（也就是`#`后面的部分）。将这个属性设置为锚记的名称即可实现跳转，如下所示： ```...

    Javascript特效代码大全

    可以使用`setTimeout`函数实现页面自动跳转。 ```javascript setTimeout(function() { window.location.href = "http://example.com"; }, 3000); // 3秒后跳转 ``` #### 5. 设置IE浏览器图标 通过`&lt;link&gt;`标签...

    javascript

    使用`meta`标签可以实现页面自动跳转到另一个URL。 ```html ;URL=http://example.com"&gt; ``` 这里的`content`属性值“2”表示等待两秒后跳转。 #### 6. 添加书签 利用`window.external.addFavorite`方法可以实现...

Magicbox
Global site tag (gtag.js) - Google Analytics