js如何实现倒计时跳转页面

互联网 18-11-17

本篇文章主要给大家介绍js实现倒计时跳转页面效果的方法。

倒计时跳转页面的效果，想必大家在浏览各大网站时，都有遇见过，主要是为了使用网页页面更加人性化。

下面我们就通过具体的代码示例，为大家讲解js实现倒计时跳转新页面的方法。

js实现倒计时跳转代码示例如下：

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>页面跳转</title>     <style>  *{             margin:0;  padding:0;  }         a{text-decoration: none;color: #fff;font-size: 30px;text-shadow: 1px 2px 10px red;}        p{             height:50px;  width: 320px;  margin:100px auto;  }         span{              display: inline-block;  height: 50px;  width:50px;  line-height: 50px;  font-size: 50px;  color: #f00;  text-align: center;  }      </style> </head> <body>   <p>还剩<span>5</span>秒跳转至<a href="http://www.php.cn">php中文网</a></p>    <script type="text/javascript">  var Espan=document.getElementsByTagName("span")[0]       var i=4  function fuc() {          if (i>0){             Espan.innerHTML=i             i--          }else{              window.location.href="http://www.php.cn"  }       }         setInterval("fuc()",1000)    </script> </body>  </html>

那么前台最终实现的倒计时跳转效果如下图：