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


Posted in Javascript onSeptember 25, 2020

如图所示样子:

基于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>秒后自动跳转到//3water.com/
<script type="text/javascript">countDown(5,'//3water.com');</script>
</body>
</html>

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

Javascript 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
js选项卡的实现方法
Feb 09 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
13个PHP函数超实用
Oct 21 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
CocosCreator入门教程之网络通信
Apr 16 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 Javascript
OpenLayers3实现测量功能
Sep 25 #Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 #Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 #Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 #Javascript
OpenLayers3实现图层控件功能
Sep 25 #Javascript
OpenLayers实现图层切换控件
Sep 25 #Javascript
OpenLayers3实现对地图的基本操作
Sep 28 #Javascript
You might like
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
PHP与javascript对多项选择的处理
2006/10/09 PHP
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
dedecms系统常用术语汇总
2007/04/03 PHP
PHP重定向的3种方式
2013/03/07 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
实现vuex原理的示例
2020/10/21 Javascript
python聊天程序实例代码分享
2013/11/18 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
初中生考试作弊检讨书
2014/12/14 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
工程款催款函
2015/06/24 职场文书
新闻稿件写作范文
2015/07/18 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
Pytorch可视化的几种实现方法
2021/06/10 Python
Django模型层实现多表关系创建和多表操作
2021/07/21 Python
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript