How to implement countdown jump page in js-HTML Knowledge-php.cn

How to implement countdown jump page in js

藏色散人

Release： 2018-11-20 09:25:03

Original

12211 people have browsed it

This article mainly introduces to you the js method to achieve the countdown jump page effect.

The effect of countdown page jump must have been encountered by everyone when browsing major websites. It is mainly to make using the web page more user-friendly.

Below we will use specific code examples to explain how to use js to implement countdown to jump to a new page.

js implementation of countdown jump codeThe example is as follows:

<!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>

Copy after login

In the js part of the above code, first we obtain the span tag object through the getElementsByTagName method, and then define a variable i, where i is time. Then use the if statement to first determine whether i is greater than 0. If it is greater than 0, insert the content i through the innerHTML method. Otherwise, jump to the page "http://www.php.cn", and finally use the setInterval() method to call fuc( )function.

Then the final countdown jump effect achieved by the front desk is as follows:

How to implement countdown jump page in js

This article is about js implementing the countdown jump page The effect method introduction of has certain reference value. I hope it will be helpful to friends in need!

The above is the detailed content of How to implement countdown jump page in js. For more information, please follow other related articles on the PHP Chinese website!