[转载]JavaScript倒计时跳转或后退

[转载]JavaScript倒计时跳转或后退 – 前端组qianduanzu.com – 博客园.

有的时候用户访问到一个错误或不可访问的页面,我们可以做一些这样的处理:倒计时N秒跳转到另一个页面或后退到前一个页面。

你可直接前往DEMO页看效果!

这种效果可以用JavaScript实现:

HTML

 <p>
     <span id="timer"></span> 秒后自动返回
     <a href="http://www.qianduanzu.com/">直接跳转</a>
 </p>

JavaScript

window.onload = function(){
     var time = 3; //设置时间为几秒
     var timer = document.getElementById('timer'); //获取ID为timer的对象
     timer.innerHTML = time; //初始化显示秒数
     time = time - 1;
     var g = window.setInterval(function(){
         if(time<0){
             window.clearTimeout(g); //清除动画
             window.location.href = 'http://www.qianduanzu.com/'; //跳转到指定地址
             //window.history.back(-1); //后退
         } else {
             showTime();
         }
     },1000);
     //显示函数
     function showTime(){
         timer.innerHTML = time;
         time--;
     }
 };

如果不想做这种动画效果,而直接用HTML实现,如下:

<meta http-equiv="refresh" content="3;url=http://www.qianduanzu.com/">
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏