HTML页面-------3秒之后自动跳转的3种常用的实现方式

在练习中,我们常常遇到一种问题就是,怎么实现页面N秒之后自动跳转呢?

我自己遇到问题和查找资料,总结了3个方法

方法1:

最简单的一种:直接在前面<head>里面添加代码:

 

<meta http-equiv="refresh" content="3;URL=res.html">
//3秒之后自动跳转到res.html,两个属于同一文件下面,要是需要跳转到jsp页面,就需要在url里面填写url地址————(浏览器的地址栏里面写入的数据,如:http://localhost:8080/TestDemo/1.jsp)

 

 

方法2:

需要用到window里面的方法:
setTimeout经过指定毫秒值后计算一个表达式。
例子:
window.setTimeout("alert('Hello, world')", 1000);
这个是写在js代码里面的;
具体实现如下:
<script type="text/javascript">
		onload=function(){     <span style="white-space:pre">				</span>//在进入网页的时候加载该方法
			setTimeout(go, 3000); <span style="white-space:pre">	</span> /*在js中是ms的单位*/
		};
		function go(){
			location.href="http://localhost:8080/TestDemo/index.jsp"; 
		}
</script>
//3秒之后自动执行go方法,直接跳转到index.jsp页面

 

方法3:

上面两个例子的缺陷就是能够实现跳转,但是不知道是什么时候跳转.实现倒数3-2-1;
 
settimeout方法已经做不了了;
setInterval每经过指定毫秒值后计算一个表达式。
没过相同的时间,就会执行相应的函数。具体的实现方法:
	<script type="text/javascript">
		onload=function(){
			setInterval(go, 1000);
		};
		var x=3; //利用了全局变量来执行
		function go(){
		x--;
			if(x>0){
			document.getElementById("sp").innerHTML=x;  //每次设置的x的值都不一样了。
			}else{
			location.href='res.html';
			}
		}
	</script>
 
  • 19
    点赞
  • 48
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
### 回答1: HTML5中超链接的应用非常广泛,可以用于链接到其他网页、图片、音频、视频等资源。在网页设计中,超链接可以用于导航菜单、页面内部跳转、外部链接等。超链接的语法格式为<a href="链接地址">链接文本</a>,其中href属性指定链接的目标地址,链接文本则是用户点击时显示的文本内容。超链接还可以设置target属性,用于指定链接的打开方式,如在当前窗口打开、在新窗口打开等。在使用超链接时,需要注意链接地址的正确性和可访问性,以确保用户能够正常访问链接目标。 ### 回答2: 超链接是HTML中的一标签,用于在网页中实现点击跳转的功能。在HTML5中,超链接的应用更加灵活多样,可以实现链接效果。 首先,超链接可以链接到其他网页,通过设置超链接的目标属性(target),可以在当前页面、新窗口、父窗口或者指定的框架中打开链接的页面。这样用户点击超链接后,可以在同一页面中显示其他网页的内容,提供更好的浏览体验。 其次,超链接也可以链接到页面的其他位置,通过设置目标位置(href)为锚点(anchor),可以在文档内部进行跳转。这样用户点击超链接后,可以直接跳转到文档的指定位置,方便用户快速定位内容。 此外,超链接还可以链接到指定邮箱地址,通过设置超链接的href属性为"mailto:xxx@xxx.com",可以直接打开用户默认的邮件客户端,并自动填写收件人的地址。这样用户点击超链接后,可以方便地联系到指定的邮箱地址。 最后,超链接也可以链接到电话号码,通过设置超链接的href属性为"tel:xxx-xxxxxxx",可以直接拨打电话。这样用户点击超链接后,可以直接拨打指定的电话号码,方便用户进行电话沟通。 在HTML5中,超链接的应用灵活多样,可以链接到各内容和资源,提供更好的用户体验。可以通过合理使用超链接,增强网页的功能和互动性,为用户提供更加丰富的浏览体验。 ### 回答3: HTML5中,超链接是一常用的标签,用于在网页中实现页面之间的跳转。 超链接的语法为:<a href="URL">Link Text</a>,其中href属性指定了链接的目标地址,URL可以是一个外部网页的地址,也可以是同一网站内的其他页面的地址。Link Text是显示在网页上的链接文本,可以是任意内容。 超链接可以用于以下几个方面的应用: 1. 导航菜单:通过在网站的不同页面间设置超链接,用户可以方便地切换页面。比如,在网站的首页上设置超链接到各个子页面,用户点击链接即可跳转到对应页面。 2. 文档下载:通过超链接,可以将文件设置为可供用户下载。比如,可以设置一个超链接到一个PDF文件,用户点击链接后可以下载该PDF文件。 3. 图片链接:可以将图片设置为超链接,点击图片即可跳转到目标页面。这在广告宣传和导航方面特别常见。 4. 锚点跳转:通过超链接和锚点的结合使用,可以实现同一页面内的跳转。比如,在长篇文章中设置锚点,然后在文中设置超链接,用户点击超链接即可直接跳转到文中的目标位置。 5. 跨站点链接:通过设置超链接到其他网站,实现网站间的跳转。比如,在一个博客页面内设置超链接到一个相关的新闻网站,用户点击链接即可跳转到该新闻网站。 超链接的应用非常广泛,为用户提供了方便快捷的页面导航和跳转功能。同时,合理设置超链接也能提升网站的用户体验和导航结构。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值