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

HTML页面3秒后自动跳转常见的3种方法,第1张

方法1:

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

复制代码代码如下:

<span style="font-size:18px"></span><span style="font-size:24px"><meta http-equiv="refresh" content="3URL=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>

实现servlet延时跳转页面的方法

来源:中国自学编程网 发布日期:2008-10-11

根据MVC模式的要求,servlet的主要功能是进行控制,也就是跳转页面.那么,有时候我们想在跳转页面前,在某个页面输出一些提示信息,并停顿几秒,再跳转到希望到达的页面(很多论坛在你登录后或发帖后都有这样的功能吧,别人怎么实现的还没研究过^)。

以下方法是我暂时能想到的:

1.使用Thread.sleep()来延时。不成功。因为:

1)如果使用out.println()先输出某些内容,再sleep几秒,最后用sendRedirect等方法跳转,那么,out.println()内的内容不会被输出,因为必须调用out.flush()方法清空缓存,内容才会显示在页面上。

2)如果使用out.println()输出内容,然后调用out.flush()将内容显示到页面上,再sleep几秒,最后用sendRedirect()等方法跳转页面,则直接报异常。因为当out.flush()时,request,response已经被提交,他们的实例已经销毁,当然不能再去调用其方法了。

2.使用out.println()为页面写上<meta>标记,<meta http-equiv="refresh"content="5url=index.jsp">,表示5秒后跳转到target.jsp页面。

3.再JS中写location=index.jsp来实现跳转(还没实验过,理论上可行)。

这时,我们有2个问题要解决,一个是,我想实现页面上显示倒计时读秒,读到1时再进行跳转。另一个是,那么多JS和HTML,让我顺着用out.println()写到Servlet里,我肯定吐血死掉。

先来看第1个问题吧,貌似有2个办法:

1) 代码很简单,也是利用meta实现自动跳转,然后用setTimeout反复调用某个函数,来重写div中数字的值。但是理论上来说,这样做的话,计时不够精确吧。。。。。那么就看第2个方法吧。

<!-- 代码片段A -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<HEAD>

<meta http-equiv='refresh' content='5url=index.html'>

<script type='text/javascript'>

var i=5

function getTime(){

document.getElementById('num').innerHTML="<font color='red'>"+i+"</font>"

i-=1

var x=setTimeout('getTime()',1000)

if(i<=0){

clearTimeout(x)

}

}

window.onload=getTime

</script>

<TITLE>欢迎您!</TITLE></HEAD>

<BODY>

<h2>注意!!页面将在<div id='num' style='display=inline'>5</div>秒后跳转</h2>

</BODY>

</HTML>

2)其实和上面的方法基本一样,只不过是等待i变为0时,写

window.location=index.html,应该就精确点了- -!

那么现在来看第2个问题,这确实是一个很棘手的问题,想想半年前刚学servlet时就考虑过这个问题,也问过老师,当然,并没有什么好的解决方案。今天又再次遇到这破问题,好好思索了一下,终于有了个比较好的办法!!!

1)首先,我们把刚才那些麻烦的代码(代码片段A),先写到个html或txt中测试,保证功能已经实现。说简单点就是把你要的页面先写好(用DW等更方便)。

2)去MyEclipse等IDE中,新建一个JSP页面,将你写好的HTML文件里的代码粘贴进去。

3)运行服务器,并访问一次该JSP。

4)去工作区下的.metadata文件夹中搜索后缀为.java的所有文件。你就会看见有个文件叫“你的JSP_jsp.java”。它就是JSP转译成的servlet文件。

5)在此servlet中,WEB容器已经将你写在JSP里的JS和HTML代码全部加上了out.println()并且将斜杆,双引号之类的问题全部处理好了。你要做的仅仅就是把那些N个out.println()复制到你的servlet当中,大功告成!波个~ ~

其实自己想想,这样做还挺无聊的。。。。完全可以在Servlet里直接访问这个要倒计时的页面,由这个页面计时完成后跳到要显示的目标页面。何必去麻烦的做一大堆out.println()呢。。。。。。。。但是好象不大符合MVC模式……怎么能用HTML来进行控制任务呢?很多时候一大堆out.println()还是无法避免的吧,但这样又让servlet承担了显示任务……哈哈,真矛盾。大家看看也就行了,相信无数新手在学习servlet时都会有我这样的想法吧,呵呵。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6096034.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-14
下一篇 2023-03-14

发表评论

登录后才能评论

评论列表(0条)

保存