html页面3秒后自动跳转的方法有哪些
在进行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秒后自动跳转的方法有哪些的更多相关文章
- HTML页面3秒后自动跳转的三种常见方法
在练习中,我们常常遇到一种问题就是,怎么实现页面N秒之后自动跳转呢? 我自己遇到问题和查找资料,总结了3个方法 方法1: 最简单的一种:直接在前面<head>里面添加代码: 复制代码 代 ...
- 微信小程序页面3秒后自动跳转
setTimeout() 是属于 window 的方法,该方法用于在指定的毫秒数后调用函数或计算表达式. 语法格式可以是以下两种: setTimeout(function () { // wx.r ...
- js实现网页多少秒后自动跳转到指定网址
在网上搜了一下,关于这个技术处理有多种方法,我只记下我在视频里学到的三种: 1.用一个response.sendRedirect("目标页面.jsp\.htm");实现直接跳转: ...
- JS n秒后自动跳转实例
<p><a href="<?php echo base_url();?>usercenter/index" id="message" ...
- 3秒后自动跳转页面【js】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js实现多少秒后自动跳转
第一种使用SetInterval: $(function () { setInterval(ChangeTime, 1000); }); function ChangeTime() { var tim ...
- 拦截器springmvc防止表单重复提交【3】3秒后自动跳回首页【重点明白如何跳转到各自需要的页面没有实现 但是有思路】
[1]定义异常类 [重点]:异常类有个多参数的构造函数public CmsException(String s, String... args),可以用来接受多个参数:如(“异常信息”,“几秒跳转”, ...
- js5秒后自动关闭本页面及5秒钟后自动跳转指定页面的方法
5秒钟后自动关闭 <!DOCTYPE HTML> <html> <head> <title>倒计时自动关闭/跳转页面</title> < ...
- js弹框3秒后自动消失
开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法 ...
随机推荐
- maven-web项目中的一些小问题
1.最新的jetty容器 org.eclipse.jetty 需要JDK1.8的支持. 2.在容器中发布WEB项目时web 中的pom.xml的依赖关系会丧失,依赖和插件需要单独完全编写(尽管IDE会 ...
- JavaScript中concat（）方法
concat(参数) 用于数组之间的连接, arrayObject.concat(arrayX,arrayX,......,arrayX) 如: var a = [1,2,3]; document.w ...
- MySQL ERROR 1005: Can't create table (errno: 150)的错误解决办法
在mysql 中建立引用约束的时候会出现MySQL ERROR 1005: Can't create table (errno: 150)的错误信息结果是不能建立 引用约束. 出现问题的大致情况 1. ...
- 学jQuery Mobile后的感想
jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持全球 ...
- Spring——jar包详解(转)
Spring——jar包详解 org.springframework.aop ——Spring的面向切面编程,提供AOP(面向切面编程)的实现 org.springframework.asm——spr ...
- java系统高并发解决方案-转
转载博客地址:http://blog.csdn.net/zxl333/article/details/8685157 一个小型的网站,比如个人网站,可以使用最简单的html静态页面就实现了,配合一些图 ...
- JAVA 多线程随笔 (一) 可见性和volatile关键字
// 先上代码 1 public class NoVisibility { private static boolean ready; private static int number; priva ...
- MVC中获取来自控制器名称与动作的方法
#region 获取控制器名称与动作 protected void GetNameSpace() { var nameSpace = this.RouteData.Values["contr ...
- 安装phpredisadmin linux nginx服务器下
1.下载phpRedisAdmin:git clone https://github.com/ErikDubbelboer/phpRedisAdmin.git 2.cd phpRedisAdmin ...
- css3圆角（还有百分比设置椭圆） 阴影 字体
一. 现在前面只写知识点,全部内容放在后面截图展示: 给元素添加圆角: border-radius属性,他的值如果等于高的一半,将会等到一个圆形,大于一半叶然是一个圆形 radius是指半径,他求出圆 ...