Heim > Artikel > tägliche Programmierung > So implementieren Sie eine Countdown-Sprungseite in js

So implementieren Sie eine Countdown-Sprungseite in js

藏色散人Original: 2018-11-17 17:17:0312153Durchsuche

In diesem Artikel wird hauptsächlich die Methode von js vorgestellt, um den Countdown-Sprungseiteneffekt zu erzielen.

Ich glaube, jeder kennt den Effekt des Countdown-Seitensprungs beim Surfen auf wichtigen Websites, hauptsächlich um die Nutzung der Webseite benutzerfreundlicher zu gestalten.

Im Folgenden erklären wir anhand spezifischer Codebeispiele, wie Sie mithilfe von js einen Countdown implementieren, um zu einer neuen Seite zu springen.

js-Implementierung des Countdown-SprungcodesDas Beispiel sieht wie folgt aus:

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

Im js-Teil des obigen Codes erhalten wir zuerst das Span-Tag-Objekt über getElementsByTagName Methode und definieren Sie dann eine Variable i, wobei i die Zeit ist. Verwenden Sie dann zunächst die if-Anweisung, um festzustellen, ob i größer als 0 ist. Wenn es größer als 0 ist, fügen Sie den Inhalt i über die innerHTML-Methode ein. Andernfalls springen Sie zur Seite „http://www.php.cn“ und Verwenden Sie schließlich die Methode setInterval(), um die Funktion fuc() aufzurufen.

Dann ist der endgültige Countdown-Sprungeffekt, der von der Rezeption erzielt wird, wie folgt:

So implementieren Sie eine Countdown-Sprungseite in js

In diesem Artikel geht es um js, der den Countdown-Sprung implementiert Die Einführung von Seite in die Effektmethode hat einen gewissen Referenzwert. Ich hoffe, dass sie für Freunde in Not hilfreich sein wird!

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Countdown-Sprungseite in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie die Online-Videowiedergabe in HTMLNächster Artikel：So implementieren Sie die Online-Videowiedergabe in HTML

In Verbindung stehende Artikel

Mehr sehen