在进行web前端开发实战练习时，我们常常遇到一种问题就是，web前端开发应该如何实现页面N秒之后自动跳转呢？通过查找相关html教程，总结了3个方法：

方法1：

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

1. <span style="font-size:18px;">   </span><span style="font-size:24px;"><meta http-equiv="refresh" content="3;URL=res.html"> </span>

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

方法2：

需要用到window里面的方法：

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

例子：

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

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

具体实现如下：

1. <script type="text/javascript">

2.         onload=function(){     <span style="white-space:pre">             </span>//在进入网页的时候加载该方法

3.             setTimeout(go, 3000); <span style="white-space:pre">  </span> /*在js中是ms的单位*/

4.         };

5.         function go(){

6.             location.href="http://localhost:8080/TestDemo/index.jsp";

7.         }

8. </script>

1. //3秒之后自动执行go方法，直接跳转到index.jsp页面

方法3：

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

settimeout：方法已经做不了了；

setInterval：每经过指定毫秒值后计算一个表达式。
没过相同的时间，就会执行相应的函数。具体的实现方法：

1. <script type="text/javascript">

2.     onload=function(){

3.         setInterval(go, 1000);

4.     };

5.     var x=3; //利用了全局变量来执行

6.     function go(){

7.     x--;

8.         if(x>0){

9.         document.getElementById("sp").innerHTML=x;  //每次设置的x的值都不一样了。

10.         }else{

11.         location.href='res.html';

12.         }

13.     }

14. </script>

setTimeout

html页面3秒后自动跳转的方法有哪些的更多相关文章

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

    在练习中,我们常常遇到一种问题就是,怎么实现页面N秒之后自动跳转呢? 我自己遇到问题和查找资料,总结了3个方法 方法1:  最简单的一种:直接在前面<head>里面添加代码: 复制代码 代 ...

  2. 微信小程序页面3秒后自动跳转

    setTimeout() 是属于 window 的方法,该方法用于在指定的毫秒数后调用函数或计算表达式. 语法格式可以是以下两种:   setTimeout(function () { // wx.r ...

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

    在网上搜了一下,关于这个技术处理有多种方法,我只记下我在视频里学到的三种: 1.用一个response.sendRedirect("目标页面.jsp\.htm");实现直接跳转: ...

  4. JS n秒后自动跳转实例

    <p><a href="<?php echo base_url();?>usercenter/index" id="message" ...

  5. 3秒后自动跳转页面【js】

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js实现多少秒后自动跳转

    第一种使用SetInterval: $(function () { setInterval(ChangeTime, 1000); }); function ChangeTime() { var tim ...

  7. 拦截器springmvc防止表单重复提交【3】3秒后自动跳回首页【重点明白如何跳转到各自需要的页面没有实现 但是有思路】

    [1]定义异常类 [重点]:异常类有个多参数的构造函数public CmsException(String s, String... args),可以用来接受多个参数:如(“异常信息”,“几秒跳转”, ...

  8. js5秒后自动关闭本页面及5秒钟后自动跳转指定页面的方法

    5秒钟后自动关闭 <!DOCTYPE HTML> <html> <head> <title>倒计时自动关闭/跳转页面</title> < ...

  9. js弹框3秒后自动消失

    开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法 ...

随机推荐

  1. 更改make/bison的版本

    一.make版本 1.下载make的压缩包 ftp://ftp.gnu.org/gnu/make/ 2.解压,安装 cd make-x.x ./configuration sh build.sh su ...

  2. ASP.NET MVC简介

    MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码 ...

  3. easyui验证

    1.验证是否必填 class="easyui-validatebox" missingMessage="必须填写" 2.验证字符串长度 class=" ...

  4. opencv 基础语法

    1.关于图像:显示图象 //在指定窗口显示图像cvShowImage void cvShowImage( const char* name, const CvArr* image ); name:窗口 ...

  5. java selenium (六) XPath 定位

    xpath 的定位方法, 非常强大.  使用这种方法几乎可以定位到页面上的任意元素. 阅读目录 什么是xpath xpath 是XML Path的简称, 由于HTML文档本身就是一个标准的XML页面, ...

  6. 从HTML到HTML

    从HTML到HTML 当你在使用一些模板软件,如Thymeleaf的时候,了解web的标准,HTML家族的内部是十分重要的,至少如果你想知道自己在做什么的时候. 问题是,每个人都知道他们正在使用一些技 ...

  7. python之路：Day8-Socket编程进阶

    本节内容: 1.Socket语法及相 2.SocketServer实现多并发 Socket语法及相关    socket概念 socket本质上就是在两台网络互通的电脑之间,建立一个通道,两台电脑通过 ...

  8. daydayup2 codeforces143D

    这题很考察分析 题意:让你构造n*m的矩阵,使得不存在两个点的距离的平方为5 1若n=1  ,答案为m 2若m=1,答案为n 3若n=2 则这样 110011001100.. 110011001100 ...

  9. daydayup3 codeforces144C

    上古的c还是很简单的,一直逗比忘记加EOF了,直到看了数据才发现 题意:给你两个字符串a,b,求问字符串a里有多少个子串排列后可以生成字符串b,‘?’可以替换为任意小写字母 思路:统计第一个子字符串小 ...

  10. 【Python扩展阅读【转】】字符串的方法及注释

      capitalize()   把字符串的第一个字符改为大写   casefold()   把整个字符串的所有字符改为小写   center(width)   将字符串居中,并使用空格填充至长度wi ...