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:
|
<<: So installieren Sie den Zookeeper-Dienst auf einem Linux-System
>>: Detaillierte Erläuterung der Befehle für grundlegende MySQL-Operationsanweisung
Artikel empfehlen
Warum Google und Facebook Docker nicht verwenden
Der Grund für das Schreiben dieses Artikels beste...
In der HTML-Tabelle wird nur der äußere Rand der Tabelle angezeigt
Ich möchte eine Frage stellen. Ich habe in Dreamw...
MySQL View-Prinzipanalyse
Inhaltsverzeichnis Aktualisierbare Ansichten Leis...
Eine kurze Diskussion über die Definition und Vorsichtsmaßnahmen von H-Tags
Den Ergebnissen zufolge gibt es für die Definitio...
Analyse des Prinzips der Verwendung von PDO zur Verhinderung von SQL-Injection
Vorwort Dieser Artikel verwendet die Vorverarbeit...
Detaillierte Erläuterung der Konfiguration und Einführung des MySQL-Halbsynchron-Replikationsprinzips
Einführung in die Umgebung: Ubuntu Server 16.04.2...
Einführung in den Swap-Speicher des Linux-Systems
Swap-Speicher ist heutzutage ein gängiger Aspekt ...
JS implementiert das Auf- und Abgleiten auf dem mobilen Endgerät, jeweils einen Bildschirm nach dem anderen
In diesem Artikel erfahren Sie den spezifischen J...
7 Fähigkeiten, die großartige Grafikdesigner beherrschen müssen
1》Seien Sie gut im Webdesign 2》Wissen, wie man Web...
Vue implementiert die Drag & Drop-Funktion für Bilder
In diesem Artikelbeispiel wird der spezifische Co...
Rhit effiziente Visualisierung Nginx-Protokollanzeigetool
Inhaltsverzeichnis Einführung Installieren Anzeig...
So installieren Sie Grafana und fügen Influxdb-Überwachung unter Linux hinzu
Installieren Sie Grafana. Die offizielle Website ...
Detaillierte Erklärung der HTML-Tabellen
Funktion: Datenanzeige, Tabellenanwendungsszenari...
Zusammenfassung der Entwicklung benutzerdefinierter Vue 3-Richtlinien
Was ist eine Richtlinie? Sowohl Angular als auch ...
Lösen Sie das Problem der Kombination von AND und OR in MySQL
Wie unten dargestellt: Wählen Sie Produktname, Pr...