Um die Fähigkeit zum Schreiben von nativem JavaScript-Code zu verbessern und die Verwendung von setTimeout() zu konsolidieren, wurde eine Countdown-Demo erstellt. Countdown ist eine gängige kleine Funktion auf heutigen Websites. Wenn es Ihnen gefällt, können Sie es behalten und als praktisches kleines Skript für den täglichen Gebrauch behandeln. Umsetzungsideen 1. Ermitteln Sie zuerst den Stundenwert, subtrahieren Sie 1 vom Stundenwert und starten Sie den Countdown. Minuten 59 Sekunden 59 Implementierungscode html <p>Countdown:</p> <span id="Stunde">5</span> <span>:</span> <span id="minuteTen">0</span> <span id="minuteBit">0</span> <span>:</span> <span id="secondTen">0</span> <span id="zweitesBit">0</span> CSS Spanne{ Anzeige: Inline-Block; Breite: 20px; Höhe: 20px; Hintergrundfarbe: #000000; Farbe: #ffffff; Textausrichtung: zentriert; } JavaScript Funktion Zeit(){ /*Stunde*/ var hourTxt = document.getElementById("Stunde"); var Stunde = parseInt(document.getElementById("Stunde").innerHTML); /*Minute*/ var minuteTenTxt = document.getElementById("minuteTen"); var minuteBitTxt = document.getElementById("minuteBit"); var minuteTen = parseInt(document.getElementById("minuteTen").innerHTML); var minuteBit = parseInt(document.getElementById("minuteBit").innerHTML); /*Zweite*/ var secondTenTxt = document.getElementById("secondTen"); var zweitesBitTxt = document.getElementById("zweitesBit"); var zweiteZehn = parseInt(document.getElementById("zweiteZehn").innerHTML); var zweitesBit = parseInt(document.getElementById("zweitesBit").innerHTML); Funktion start(){ Stunde--; hourTxt.innerHTML = Stunde; minuteZehn = 5; minuteZehnTxt.innerHTML = minuteZehn; minuteBit = 9; minuteBitTxt.innerHTML = minuteBit; zweiteZehn = 5; zweiterZehnTxt.innerHTML = zweiterZehn; zweitesBit = 9; zweitesBitTxt.innerHTML = zweitesBit; /*secondBit beginnt abzunehmen*/ Funktion Sekunde(){ zweitesBit--; zweitesBitTxt.innerHTML = zweitesBit; /*Zehn Sekunden später*/ wenn(zweitesBit < 0){ zweiteZehn--; zweiterZehnTxt.innerHTML = zweiterZehn; zweitesBit = 9; zweitesBitTxt.innerHTML = zweitesBit; /*Countdown fortsetzen*/ setTimeout(Sekunde,1000); /*Eine Minute später*/ wenn(zweiteZehn < 0){ minuteBit--; minuteBitTxt.innerHTML = minuteBit; zweiteZehn = 5; zweiterZehnTxt.innerHTML = zweiterZehn; zweitesBit = 9; zweitesBitTxt.innerHTML = zweitesBit; /*Zehn Minuten später*/ wenn(Minutenbit < 0){ MinuteZehn--; minuteZehnTxt.innerHTML = minuteZehn; minuteBit = 9; minuteBitTxt.innerHTML = minuteBit; } /*Nach einer Stunde*/ if(minuteZehn < 0){ Stunde--; hourTxt.innerHTML = Stunde; minuteZehn = 5; minuteZehnTxt.innerHTML = minuteZehn; minuteBit = 9; minuteBitTxt.innerHTML = minuteBit; zweiteZehn = 5; zweiterZehnTxt.innerHTML = zweiterZehn; zweitesBit = 9; zweitesBitTxt.innerHTML = zweitesBit; } /*Countdown endet*/ wenn(Stunde < 0 ){ Stunde = 0; hourTxt.innerHTML = Stunde; minuteZehn = 0; minuteZehnTxt.innerHTML = minuteZehn; minuteBit = 0; minuteBitTxt.innerHTML = minuteBit; zweiteZehn = 0; zweiterZehnTxt.innerHTML = zweiterZehn; zweitesBit = 0; zweitesBitTxt.innerHTML = zweitesBit; ClearTimeout (Sekunde); Zeitüberschreitung löschen (Start); } } }anders{ setTimeout(Sekunde,1000); } } setTimeout(Sekunde,1000); } setzeTimeout(start,1000); } Ausführungsseite Seite beenden Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
>>: Eine kurze Diskussion über das Problem des vergessenen MySQL-Passworts und des Anmeldefehlers
Elementform und Codeanzeige Weitere Einzelheiten ...
Als ich kürzlich Apple.com/Ebay.com/Amazon.com/sh...
Vorwort: Beim Übergeben von Daten zwischen überge...
Vor Kurzem habe ich mit der Aktualisierung meines ...
1. Fügen Sie den Isolationsmarker hinzu: ip netns...
1. Berechnete Eigenschaften und Listener 1.1 Bere...
1. Abnormale Leistung beim Docker-Start: 1. Der S...
In diesem Artikel wird die Methode zum Teilen von...
Obwohl wir keine professionellen DBAs sind, könne...
Inhaltsverzeichnis Zweck des Teleports So funktio...
Inhaltsverzeichnis Zeig mir den Code Testen Sie d...
1. Einleitung Durch Aktivieren des Slow Query Log...
Im vorherigen Artikel haben wir etwas über die pa...
Inhaltsverzeichnis Ziehen Sie das Rocketmq-Image ...
1. MHA Durch die Überwachung des Masterknotens ka...