JavaScript zum Erreichen eines einfachen Seiten-Countdowns

JavaScript zum Erreichen eines einfachen Seiten-Countdowns

In diesem Artikelbeispiel wird der spezifische JavaScript-Code zur Implementierung eines einfachen Seiten-Countdowns zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Fügen Sie einfach den Code ein

<!DOCTYPE html>
<html>
<Kopf>
 <meta charset="utf-8">
 <style type="text/css">
  Körper
  {
   Farbe: rot;
   Textausrichtung: zentriert;
  }
  .eins{
   Farbe: Schwarz;
   Textausrichtung: zentriert;
  }
 </Stil>
</Kopf>
<Text>
<p>
 Datums-Countdown<br>
 Bitte geben Sie Ihr Zieldatum ein und klicken Sie auf die Schaltfläche, um den Countdown bis zu Ihrem Zieldatum zu starten!
</p>
<Formularname="Formular1">
 <input type="text" id="a" size=1 name="a">Jahr<input type="text" id="b" size=1 name="b">Monat<input type="text" id="c" size=1 name="c">Tag<input type="text" id="d" size=1 name="d">Stunde<input type="text" id="e" size=1 name="e">Minute<input type="text" id="f" size=1 name="f">Sekunde<br>

 <div id="Zeit" value="Zeit"></div> 
 <Skript>
  Funktion getdate(Uhr){
   var jetzt=neues Datum();
   var y = jetzt.getFullYear()
   var m = jetzt.getMonth()
   var d = jetzt.getDate()

   var Tag = jetzt.getDay()
   var h = jetzt.getHours()
   var minu = jetzt.getMinutes()
   var s = jetzt.getSeconds()

   m+=1;
   var array = new Array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag")
   var nowtime=y+"Jahr"+m+"Monat"+d+"Tag"+array[Tag]+" "+h+"Stunde"+minu+"Minute"+s+"Sekunde";
   clock.innerHTML="Aktuelle Zeit: "+nowtime; 
  }
  fenster.onload = funktion(){  
  Fenster.SetInterval("getdate(time)",1000)
  }
 </Skript>

 <Eingabetyp="Schaltfläche" Wert="Countdown" Onclick="leftTime()">:
 Es gibt noch:
 <Eingabetyp="text" id="cha" >
 <Skript> 
 var flag=1;var t;
 Funktion linkeZeit(){ 

 wenn(flag==0){flag=1;}

 Jahr=document.getElementById("a").Wert;
 Monat=document.getElementById("b").Wert;
 Tag=document.getElementById("c").Wert;
 Stunde=document.getElementById("d").Wert;
 Minute=document.getElementById("e").Wert;
 Sekunde=document.getElementById("f").Wert;

 var leftTime = (neues Datum (Jahr, Monat-1, Tag, Stunde, Minute, Sekunde)) – (neues Datum ()); 
 //Berechne die verbleibenden Millisekunden if(leftTime>0){
 var days = parseInt(leftTime/1000/60/60/24,10); //Verbleibende Tage berechnenvar hours = parseInt(leftTime/1000/60/60%24,10); //Verbleibende Stunden berechnenvar minutes = parseInt(leftTime/1000/60%60,10);//Verbleibende Minuten berechnenvar seconds = parseInt(leftTime/1000%60,10);//Verbleibende Sekunden berechnendocument.getElementById("cha").value=days+"天" + hours+"小时" + minutes+"分" + seconds+"秒";
 }
 anders{
  document.getElementById("cha").value="0 Tage 0 Stunden 0 Minuten 0 Sekunden";
  alert("Meister, die Zeit ist um!")
  Flag=0;Löschintervall(t);
 }
 wenn(flag==1){
 t=setInterval("linkeZeit()",1000);
 Flagge=2;
 }
 } 
 </Skript>
</form> 
</body>
</html>

Als ich den Test zum ersten Mal fertig geschrieben hatte, stellte ich fest, dass die Seite nach Ablauf der Zeit immer wieder Eingabeaufforderungsfelder anzeigte. Später suchte ich auf Baidu und fand heraus, dass jedes Mal, wenn setInterval aufgerufen wird, um die Funktion regelmäßig aufzurufen, clearInterval gesetzt werden muss, um sie zu schließen. Also implementierte ich es, indem ich ein Flag setzte. Der endgültige Code ist oben dargestellt. Die Ergebnisse sind wie folgt:

Die Zeit ist um:

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:
  • JS-Countdown-Implementierungscode (Stunden, Minuten, Sekunden)
  • JS-Countdown (Tage, Stunden, Minuten, Sekunden)
  • Einfacher und leicht zu verwendender Countdown-JS-Code
  • js-Code zur Realisierung des 60-Sekunden-Countdowns beim Klicken auf die Schaltfläche
  • 2 einfache JS-Countdown-Methoden
  • Beispiel für die Implementierung einer einfachen Countdown-Funktion mit nativem JS
  • js Countdown-Sprungbeispiel nach ein paar Sekunden
  • Ein guter JS-HTML-Seiten-Countdown kann auf Sekunden genau sein
  • js realisiert den Countdown-Effekt des Klickens, um den Bestätigungscode zu erhalten
  • Javascript implementiert den Countdown für Produkt-Blitzverkäufe (Zeit wird mit der Serverzeit synchronisiert)

<<:  So installieren Sie den Zookeeper-Dienst auf einem Linux-System

>>:  Detaillierte Erläuterung der Befehle für grundlegende MySQL-Operationsanweisung

Artikel empfehlen

Wie stellt MySQL eine Verbindung zum entsprechenden Clientprozess her?

Frage Wie können wir bei einer bestimmten MySQL-V...

Richtiger Einsatz von MySQL-Partitionstabellen

Übersicht über partitionierte MySQL-Tabellen Wir ...

So richten Sie ein Bereitstellungsprojekt unter einem Linux-System ein

1. Ändern Sie die Firewall-Einstellungen und öffn...

Detaillierte Erläuterung nativer Javascript-Vererbungsmethoden und ihrer Vor- und Nachteile

Inhaltsverzeichnis Vorwort Prototypische Vererbun...

Beispiel für die Verwendung von Docker Swarm zum Erstellen eines verteilten Crawler-Clusters

Während des Crawler-Entwicklungsprozesses sind Si...

Anweisungen zum Erlernen von Vue

Inhaltsverzeichnis 1. v-Text (v-Befehlsname = „Va...

Lösung für das versehentliche Löschen von Daten in MySQL und Kill-Anweisungsprinzip

mysql hat versehentlich Daten gelöscht Verwenden ...

So setzen Sie Ihr Linux-Passwort zurück, wenn Sie es verloren haben

1. Das Startmenü besteht darin, den Cursor in die...

Erläuterung der MySQL-Indexoptimierung

Bei unserer täglichen Arbeit führen wir manchmal ...

Einführung in die Verwendung von exists und except in SQL Server

Inhaltsverzeichnis 1. existiert 1.1 Beschreibung ...

Was Sie beim Schreiben selbstschließender XHTML-Tags beachten sollten

Das img-Tag in XHTML ist ein sogenanntes selbstsc...

Vue+Element+Springboot zum Implementieren eines Beispiels für die Anzeigefunktion des Fortschrittsbalkens beim Dateidownload

Inhaltsverzeichnis 1. Nachfragehintergrund 2. Opt...

Die Verwendung von FrameLayout in sechs Layouts

Vorwort In der letzten Ausgabe haben wir Ihnen Li...

Einführung in das Enctype-Attribut des Form-Tags und seine Anwendungsbeispiele

Enctype: Gibt den Kodierungstyp an, der vom Browse...

Detaillierte Erklärung der CSS3-Textschatteneigenschaft Textschatten

Textschatten-Textschatten-Eigenschaftseffekte: 1....