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
Detaillierte Erklärung zur Ausführung von Skripten oder Anweisungen durch Zabbix auf Remote-Hosts
Szenarioanforderungen 1. Wir können die Skriptfun...
Zusammenfassung der allgemeinen Docker-Befehle und Tipps
Installationsskript Ubuntu / CentOS Es scheint ei...
Implementierung des Imports und Exports von Vue-Element-Admin-Projekten
vue-element-admin importiert Komponentenkapselung...
Detaillierte Erläuterung der Verwendung des gcc-Befehls unter Linux
Inhaltsverzeichnis 1. Vorverarbeitung 2. Zusammen...
Grafisches Tutorial zur Installation und Verwendung von MySQL 5.7.17
MySQL ist ein relationales Datenbankverwaltungssy...
Installieren Sie .NET 6.0 im CentOS-System mithilfe eines Cloud-Servers
.NET SDK-Download-Link https://dotnet.microsoft.c...
HTML-Tabellen-Tag-Tutorial (7): Hintergrundfarbattribut BGCOLOR
Die Hintergrundfarbe der Tabelle kann über das At...
Ubuntu führt regelmäßig Beispielcode eines Python-Skripts aus
Originallink: https://vien.tech/article/157 Vorwo...
Detaillierte Erklärung des Prinzips und der Verwendung von MySQL-Ansichten
Dieser Artikel veranschaulicht anhand von Beispie...
Eine kurze Analyse von MySQL - MVCC
Versionskette In den Tabellen der InnoDB-Engine g...
Zusammenfassung der Entwicklung benutzerdefinierter Vue 3-Richtlinien
Was ist eine Richtlinie? Sowohl Angular als auch ...
JavaScript zum Erzielen eines ausgewogenen digitalen Scroll-Effekts
Inhaltsverzeichnis 1. Hintergrund zur Umsetzung 2...
Initialisieren Sie Ubuntu 16.04 in drei Minuten und stellen Sie Java-, Maven- und Docker-Umgebungen bereit
Fast-Linux-Projektadresse: https://gitee.com/uitc...
So installieren Sie Nginx und konfigurieren mehrere Domänennamen
Nginx-Installation CentOS 6.x yum verfügt standar...
Der umfassendste und detaillierteste Prozess zur Installation von Deepin20 auf einer virtuellen VMware-Maschine
Software für virtuelle Maschinen: VMware Workstat...