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

Home

Daily Programming

HTML Knowledge

How to implement countdown jump page in js

藏色散人

Nov 17, 2018 pm 05:17 PM

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>

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn