前端网页功能设计:n秒后实现页面跳转
程序员文章站
2022-04-04 20:40:44
经常上网,在一些场景下需要再一段时间(假设为5s)后进行页面跳转,同时,页面中显示提示信息“n秒后页面跳转”,并且n是动态的。下面是该功能的具体实现。
实...
经常上网,在一些场景下需要再一段时间(假设为5s)后进行页面跳转,同时,页面中显示提示信息“n秒后页面跳转”,并且n是动态的。下面是该功能的具体实现。
实现思路
多久之后将跳转,转化为对应秒数。 秒数为零,页面跳转,否则秒数减一。每一秒重复一次该操作,且要更新页面中的提示信息
<p class="content">5s后将跳转到别的页面</p> <script> var content=document.getElementsByClassName("content")[0]; var timeLeft=5;// 5s function tiaozhuan(timeLeft){ if(timeLeft>0){ setTimeout(function(){ timeLeft--; content.innerText=timeLeft+"s后将跳转到别的页面"; tiaozhuan(timeLeft); },1000); }else{ window.location.href="https://www.baidu.com"; } } tiaozhuan(timeLeft); </script>