基于JS实现操作成功之后自动跳转页面

 更新时间:2020年09月25日 14:35:55   作者:鱼还在鱼塘里  
这篇文章主要介绍了基于JS实现操作成功之后自动跳转页面的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

如图所示样子:

在这里插入图片描述

制作一个跳转提示页面:
要求:
1. 如果打开该页面后,如果不做任何操作则5秒后自动跳转到一个新的地址,如百度主页。
2. 如果点击“返回”按钮则返回前一个页面

<!DOCTYPE html>
<html>
 <head>
 <title>浏览器对象</title> 
 <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>  
 </head>
 <body>
 <!--先编写好网页布局-->
 
 <div><h1>操作成功</h1></div>
 <div><a id ="p1">5</a>后回到主页<a href="http://www.baidu.com" rel="external nofollow" >返回</a></div>
 <script type="text/javascript"> 
 
  
  
  //获取显示秒数的元素,通过定时器来更改秒数。
   
   var num = 100;
   function downTime(){
		 document.getElementById('p1').innerHTML=num;
     if(num>0){
      num--;
     }else{
       window.location = "http://www.baidu.com";
     }
     setTimeout("downTime()",1000);
   }
  //通过window的location和history对象来控制网页的跳转。
  downTime();
 </script> 
</body>
</html>

PS:下面看下JavaScript五秒自动跳转到新页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>五秒跳页五秒关闭</title>
<script type="text/javascript">
function countDown(secs,surl)
{
var jumpTo=document.getElementById('jumpTo');
jumpTo.innerHTML=secs;
if(--secs>0)
{
setTimeout("countDown("+secs+",'"+surl+"')",1000);//注意打点
}
else{
location.href=surl;
}
}
</script>
</head>

<body>
<span id="jumpTo">5</span>秒后自动跳转到//www.jb51.net/
<script type="text/javascript">countDown(5,'//www.jb51.net');</script>
</body>
</html>

到此这篇关于基于JS实现操作成功之后自动跳转页面的文章就介绍到这了,更多相关js自动跳转页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序教程系列之页面跳转和参数传递(6)

    微信小程序教程系列之页面跳转和参数传递(6)

    这篇文章主要为大家详细介绍了微信小程序教程系列之页面跳转和参数传递,微信小程序提供了3种页面跳转方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • JavaScript实现随机数生成器(去重)

    JavaScript实现随机数生成器(去重)

    这篇文章主要为大家详细介绍了JavaScript实现随机数生成器,生成不重复的随机数,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • javascript比较两个日期的先后示例代码

    javascript比较两个日期的先后示例代码

    这篇文章主要介绍了javascript比较两个日期的先后示例代码,非常的不错,这里推荐给有相同需求的小伙伴。
    2014-12-12
  • JavaScript中的DOM遍历详解

    JavaScript中的DOM遍历详解

    文档对象模型 (DOM) 表示 HTML 文档的结构,导航或“遍历”此结构是 Web 开发的基本方面,使开发人员能够在网页上选择、修改、删除或添加内容,本文深入研究了使用 JavaScript 进行 DOM 遍历的艺术,提供了一个强大的工具包来处理各种遍历场景
    2023-09-09
  • 如何用uni-app实现顶部导航栏显示按钮和搜索框

    如何用uni-app实现顶部导航栏显示按钮和搜索框

    本文介绍了如何用uni-app实现顶部导航栏显示按钮和搜索框,感兴趣的同学,可以参考下,并且试验一下。
    2021-06-06
  • ES6 Promise对象的含义和基本用法分析

    ES6 Promise对象的含义和基本用法分析

    这篇文章主要介绍了ES6 Promise对象的含义和基本用法,结合实例形式分析了Promise的含义、功能、基本用法及相关操作注意事项,需要的朋友可以参考下
    2019-06-06
  • js选择并转移导航菜单示例代码

    js选择并转移导航菜单示例代码

    选择并转移导航菜单的方法有很多,本例使用js来实现选择并转移导航菜单,需要的朋友可以参考下
    2014-08-08
  • webpack常用构建优化策略小结

    webpack常用构建优化策略小结

    这篇文章主要介绍了webpack常用构建优化策略小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Bootstrap table使用方法记录

    Bootstrap table使用方法记录

    这篇文章主要为大家详细介绍了Bootstrap table的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • js es6系列教程 - 基于new.target属性与es5改造es6的类语法

    js es6系列教程 - 基于new.target属性与es5改造es6的类语法

    下面小编就为大家带来一篇js es6系列教程 - 基于new.target属性与es5改造es6的类语法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论