js实现网页多少秒后自动跳转到指定网址
在网上搜了一下,关于这个技术处理有多种方法,我只记下我在视频里学到的三种:
1、用一个response.sendRedirect("目标页面.jsp\.htm");实现直接跳转;
2、有时我们需要有点提示,比如“x秒后自动跳转,若没有跳转,请点击此处”,则可以在myeclipse中调用Snippets中的Delay Go To URL.会自动生成如下代码:
代码如下:
<script language="JavaScript1.2" type="text/javascript">
<!--
// Place this in the 'head' section of your page.
function delayURL(url, time) {
setTimeout("top.location.href='" + url + "'", time);
}
//-->
</script>
<!-- Place this in the 'body' section -->
<a href="javascript:" onClick="delayURL('myPage.html','2000')">My Delayed Link</a>
将此代码修改为:
代码如下:
<script language="JavaScript1.2" type="text/javascript">
function delayURL(url, time) {
setTimeout("top.location.href='" + url + "'", time);
}
</script>
<span id="time" style="background: red">3</span>
秒钟之后自动跳转,如果不跳转,请点击下面链接
<a href="目标页面.jsp">目标页面</a>
<script type="text/javascript">
delayURL("http://www.ablanxue.com", 3000);
</script>
然后将在3秒钟之后直接跳转到“目标页面”。这种方法就是设定几秒钟后跳转则在这过程中页面不会有变化,比如说设定3秒,然后随着时间的变化3变成2再变成1直至跳转,下面请看第三种方法。
3、把方法2中的代码修改为:
代码如下:
<script language="JavaScript1.2" type="text/javascript">
function delayURL(url) {
var delay=document.getElementById("time").innerHTML;
//最后的innerHTML不能丢,否则delay为一个对象
if(delay>0){
delay--;
document.getElementById("time").innerHTML=delay;
}else{
window.top.location.href=url;
}
setTimeout("delayURL('" + url + "')", 1000);
//此处1000毫秒即每一秒跳转一次
}
</script>
<span id="time" style="background: red">3</span>
秒钟之后自动跳转,如果不跳转,请点击下面链接
<a href="目标页面.jsp">主题列表</a>
<script type="text/javascript">
delayURL("http://pic.ablanxue.com");
</script>
此方法实现的效果为在上一个页面点击完submit后跳转到本页面经过3秒(这个3会递减到0)后跳转到目标页面。
js实现网页多少秒后自动跳转到指定网址的更多相关文章
- JS n秒后自动跳转实例
<p><a href="<?php echo base_url();?>usercenter/index" id="message" ...
- js弹框3秒后自动消失
开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法 ...
- html页面3秒后自动跳转的方法有哪些
在进行web前端开发实战练习时,我们常常遇到一种问题就是,web前端开发应该如何实现页面N秒之后自动跳转呢?通过查找相关html教程,总结了3个方法: 方法1: 最简单的一种:直接在前面<hea ...
- HTML页面3秒后自动跳转的三种常见方法
在练习中,我们常常遇到一种问题就是,怎么实现页面N秒之后自动跳转呢? 我自己遇到问题和查找资料,总结了3个方法 方法1: 最简单的一种:直接在前面<head>里面添加代码: 复制代码 代 ...
- 3秒后自动跳转页面【js】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js实现多少秒后自动跳转
第一种使用SetInterval: $(function () { setInterval(ChangeTime, 1000); }); function ChangeTime() { var tim ...
- 微信小程序页面3秒后自动跳转
setTimeout() 是属于 window 的方法,该方法用于在指定的毫秒数后调用函数或计算表达式. 语法格式可以是以下两种: setTimeout(function () { // wx.r ...
- 拦截器springmvc防止表单重复提交【3】3秒后自动跳回首页【重点明白如何跳转到各自需要的页面没有实现 但是有思路】
[1]定义异常类 [重点]:异常类有个多参数的构造函数public CmsException(String s, String... args),可以用来接受多个参数:如(“异常信息”,“几秒跳转”, ...
- 两种方法实现js页面隔几秒后跳转,及区别
这里需要用到window的两个对象方法,setInterval()和setTimeout() 一. 区别: 1. setInterval(code,millisec) 周期性(millisec单位 ...
随机推荐
- 【php wamp的配置】
- BS4(BeautifulSoup4)的使用--find_all()篇
可以直接参考 BS4文档:https://www.crummy.com/software/BeautifulSoup/bs4/doc/index.zh.html#find-all 注意的是: 1.有些 ...
- spring中quartz的使用。【转http://www.cnblogs.com/kay/archive/2007/11/02/947372.html】
注:从spring3到spring4改变 org.springframework.scheduling.quartz.CronTriggerBean org.springframework.sched ...
- Contest Hunter #46 T1 磁力块 [分块]
描述 在一片广袤无垠的原野上,散落着N块磁石.每个磁石的性质可以用一个五元组(x,y,m,p,r)描述,其中x,y表示其坐标,m是磁石的质量,p是磁力,r是吸引半径.若磁石A与磁石B的距离不大于磁石A ...
- Android网络编程之HttpClient运用
Android网络编程之HttpClient运用 在 Android开发中我们经常会用到网络连接功能与服务器进行数据的交互,为此Android的SDK提供了Apache的HttpClient来方便我们 ...
- hdu4619 / 最大独立集
题意,一个矩阵,上面可以横放或者竖着放骨牌(1X2)保证横的与横的不重叠,竖的和竖的不重叠,求拿掉最小的牌,使所有的都不重叠. 分析:一看,不重叠就是没有边,拿最少,就是留最多,最大独立集啊!二分图, ...
- Atcoder 3857 Median Sum
Problem Statement You are given N integers A1, A2, ..., AN. Consider the sums of all non-empty subse ...
- seo优化入门教程:影响关键词排名的因素
很多人都说网站优化,但是怎么个优化法?优化什么东西?很多人都不知道.虽然我们优化的是我们的网站,但是提升的却是我们的关键词排名. 我们不管去优化哪一个网站,得到的搜索结果,他都会去触发关键词排名的因素 ...
- PPT中的图像失真
现象:Office PowerPoint 保存出来的PPT文件在WPS下播放的时候会出现图像失真的显现. 解决方法:Office PowerPoint打开PPT将里面的图像另存为BMP格式的图像文件, ...
- 转:我们是怎么做Code Review的
我们是怎么做Code Review的 前几天看了<Code Review 程序员的寄望与哀伤>,想到我们团队开展Code Review也有2年了,结果还算比较满意,有些经验应该可以和大 ...