HTML页面-------3秒之后自动跳转的3种常用的实现方式

在练习中,我们常常遇到一种问题就是,怎么实现页面N秒之后自动跳转呢?

我自己遇到问题和查找资料,总结了3个方法

方法1:

最简单的一种:直接在前面<head>里面添加代码:

<span style="font-size:18px;">   </span><span style="font-size:24px;"><meta http-equiv="refresh" content="3;URL=res.html"> </span>
<span style="font-size:24px;">//3秒之后自动跳转到res.html,两个属于同一文件下面,要是需要跳转到jsp页面,就需要在url里面填写url地址————(浏览器的地址栏里面写入的数据,如:http://localhost:8080/TestDemo/1.jsp)</span>

方法2:

需要用到window里面的方法:

setTimeout 经过指定毫秒值后计算一个表达式。

例子:

window.setTimeout("alert('Hello, world')", 1000);

这个是写在js代码里面的;

具体实现如下:

<script type="text/javascript">
		onload=function(){     <span style="white-space:pre">				</span>//在进入网页的时候加载该方法
			setTimeout(go, 3000); <span style="white-space:pre">	</span> /*在js中是ms的单位*/
		};
		function go(){
			location.href="http://localhost:8080/TestDemo/index.jsp";
		}
</script>
//3秒之后自动执行go方法,直接跳转到index.jsp页面

方法3:

上面两个例子的缺陷就是能够实现跳转,但是不知道是什么时候跳转.实现倒数3-2-1;

settimeout方法已经做不了了;

setInterval 每经过指定毫秒值后计算一个表达式。

没过相同的时间,就会执行相应的函数。具体的实现方法:

	<script type="text/javascript">
		onload=function(){
			setInterval(go, 1000);
		};
		var x=3; //利用了全局变量来执行
		function go(){
		x--;
			if(x>0){
			document.getElementById("sp").innerHTML=x;  //每次设置的x的值都不一样了。
			}else{
			location.href='res.html';
			}
		}
	</script>
setTimeout
时间: 2024-10-17 21:16:12

HTML页面-------3秒之后自动跳转的3种常用的实现方式的相关文章

用js在网页上完成倒计时3秒后自动跳转到另一个页面

<body> <div id="time"></div> <a href="#" onclick="stop()">停止</a> <script type="text/javascript"> var i=3; function changeTime(){ document.getElementById("time").innerHTM

js实现网页多少秒后自动跳转到指定网址

在网上搜了一下,关于这个技术处理有多种方法,我只记下我在视频里学到的三种: 1.用一个response.sendRedirect("目标页面.jsp\.htm");实现直接跳转: 2.有时我们需要有点提示,比如“x秒后自动跳转,若没有跳转,请点击此处”,则可以在myeclipse中调用Snippets中的Delay Go To URL.会自动生成如下代码: 代码如下: <script language="JavaScript1.2" type="te

计时3秒后自动跳转到登录页

<script> //计时3秒后自动跳转到登录页 var i = 3; var time_out; time_out = setInterval("time()", 800); function time() { if(i == 0){ window.location.href = "/user/login"; clearInterval(time_out); } document.getElementById("time").inn

jBox如何实现3秒后自动跳转

首先要调用window的定时器,里面有一个函数,如下: $.jBox.tip("注册成功,3秒后自动跳转--", 'success'); window.setTimeout(function () { window.location.href = document.getElementById('strBackUrl').value }, 3000);

页面定时刷新或自动跳转

采用response对象的setHeader方法,实现页面的定时跳转或定时自更新.例如: (1)response.setHeader("refresh","5");每个5s刷新一次 (2)response.setHeader("refer","10;url=http://www.souhu.com");延迟10秒,自动重定向到网页http://ww.souhu.com 注意:与(1)(2)等价的html代码如下: (3)<

js实现多少秒后自动跳转

第一种使用SetInterval: $(function () { setInterval(ChangeTime, 1000); }); function ChangeTime() { var time; time = $("#time").text(); time = parseInt(time); time--; if (time <= 0) { window.location.href = "/Home/Index"; } else { $("

HTML页面自动跳转的五种实现方法

下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的02view.html(根据自己需要自行修改)文件. 1)html的实现 <head> <meta http-equiv="refresh" content="5;url=02view.html"> </head> 优点:简单 缺点:Struts Tiles中无法使用 2)javascript的实现 <script language="

Android欢迎页面2秒钟后自动跳转到主页面

页面跳转 一.功能介绍 打开APP先进入欢迎页面,2秒钟后自动进入主页面 二.项目结构分析 三.详细代码 1.WelcomeActivity.java package com.xingyun.shoopingmail4; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.os.Handler; import com.xingyun.shoopin

JSP实现界面的自动跳转的几种方式

下面来谈一谈在jsp中实现的几种界面自动跳转的方法. 使用JavaScript脚本 <html> <script language=javascript> function out(obj){ var i=obj; if(i==0) document.location.herf="target,html"; document.body.innerHTML=i; i--; setTimeout("out("+i+")",10