JavaScript实现5秒倒计时自动跳转页面

作者:小括号

时间:2026-10-30

浏览:115

本文介绍如何利用JavaScript的setInterval定时器与DOM操作实现页面倒计时跳转功能。通过修改元素innerHTML更新秒数,并在倒计时结束时调用window.location.href实现自动跳转,同时提供手动返回按钮。

文章目录

JavaScript倒计时跳转实现

本文分享一个使用JavaScript实现的浏览器倒计时自动跳转页面的示例,供开发者参考。

具体运行效果如下图所示:

JavaScript倒计时跳转实现


<!DOCTYPE html>
<html>
 <head>
 <title>浏览器对象</title> 
 <meta http-equiv="Content-Type" content="text/html; charset=gb123"/> 
 </head>
 <body>
 <H4>操作成功</H4>
 <p>
 <b id="second">5</b>秒后回到主页&nbsp;<a href="javascript:goBack();">返回</a> 
 </p>
 
<script type="text/javascript"> 
 
 var sec = document.getElementById("second");
 var i = 5;
 var timer = setInterval(function(){
 i--;
 sec.innerHTML = i;
 if(i==1){
  window.location.href = "//www.jb51.net";
 }
 },1000);
 
 function goBack(){ 
 window.history.go(-1);
 } 
 </script> 
 </body>
</html>

如需了解更多倒计时相关功能,可查阅专题:《倒计时功能》。

以上就是该实现的全部内容,希望能为您的开发工作提供帮助,欢迎继续支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章