在进行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. String or binary data would be truncated 解决办法

    原因: 一般出现这个问题是因为数据库中的某个字段的长度小,而插入数据大 解决: 找到相应字段,修改表结构,使表字段大小相同或大于要插入的数据

  2. ios视图frame和bounds的对比

    bounds坐标:自己定义的坐标系统,setbound指明了本视图左上角在该坐标系统中的坐标,   默认值(0,0) frame坐标:  子视图左上角在父视图坐标系统(bounds坐标系统)中的坐标, ...

  3. 滴滴快车,安全把你带到凡科安全知识h5大赛

    滴滴出行提出"安全第一.体验第二.效率第三"的可持续发展宗旨.近期,滴滴出行还推广了"安全带"宣传,包括明星夫妻CP安全带姿势和明星后排安全带语音播报等,来提升 ...

  4. poll()函数的使用

    分类: LINUX poll函数用于监测多个等待事件,若事件未发生,进程睡眠,放弃CPU控制权,若监测的任何一个事件发生,poll将唤醒睡眠的进程,并判断是什么等待事件发生,执行相应的操作.poll函 ...

  5. Ajax些成绩批量录入

    1.jsp,ajax的循环调用,必须要递归,否则会出错. <%@ page language="java" import="java.util.*" pa ...

  6. forever让nodejs应用后台执行

    nodejs一般是当成一条用户命令执行的,当用户断开客户连接,运用也就停了,很烦人.如何让nodejs应用当成服务,在后台执行呢? 最简单的办法: $ nohup node app.js & ...

  7. DOM加载顺序

    最近一直在困扰dom的加载顺序问题,经常会遇到以为绑定好的事件不响应等情况,一头雾水,直到请教了周围的同事,才发现了解dom的加载顺序是多么的重要. 关于这个问题,其实网上已经有一些介绍,但是我觉得并 ...

  8. 2015-01-19 .Net 软件工程师 笔试题

    填空题 1.String是__类型(值类型或引用类型) 2.int的基类是__ 3.实现__的类,可以应用foreach语句 4.要输出一段XML文档,用__类来实现能够确保输出正确格式的XML,输出 ...

  9. 用 QGIS 画矢量交通路线图

    一.准备工作 1.安装插件 为了方便画图,我们安装了OpenLayers,QuickOSM两个插件. 如何安装插件,度娘上都有答案.下图中打勾的部分为安装好的插件: OpenLayers提供了一些开放 ...

  10. Amazon EC2免费VPS防止超额被扣钱三大方法:流量 硬盘读写 运行时长

    Amazon EC2也就是亚马逊云服务免费VPS主机服务,内存是613MB,月流量是30GB,主机空间是30GB,可以免费使用一年,又加上Amazon服务器全球多个节点CDN和本身的名气,早在2010 ...