JavaScript implementiert einfache Datumseffekte
|
Der spezifische Code der JavaScript-Datumseffekte dient zu Ihrer Information. Der spezifische Inhalt ist wie folgt Direkt zum Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<style type="text/css">
*{
Polsterung: 0;
Rand: 0;
}
#Datum{
Breite: 450px;
Höhe: 300px;
Hintergrundfarbe: dunkelorange;
Rahmenradius: 10px;
Rand: 100px automatisch;
}
#jetztDatum{
Breite: 450px;
Höhe: 60px;
Zeilenhöhe: 60px;
Textausrichtung: zentriert;
Farbe: #fff;
Schriftgröße: 26px;
}
#Tag{
Breite: 200px;
Höhe: 200px;
Zeilenhöhe: 200px;
Hintergrundfarbe: Orchidee;
Rand: 0 automatisch;
Textausrichtung: zentriert;
}
</Stil>
</Kopf>
<Text>
<div id="Datum">
<p id="jetztDatum"></p>
<p id="Tag"></p>
</div>
<Skripttyp="text/javascript">
//Tag abrufen var nowDate = document.getElementById("nowDate");
var Tag = document.getElementById("Tag");
// Timer zum Aktualisieren von Zeitänderungen verwenden setInterval(nowNumTime,1000);
jetztAnzahlZeit();
Funktion jetztAnzahlZeit(){
var jetzt = neues Datum();
var Stunde = jetzt.getHours();
var minute = jetzt.getMinutes();
var Sekunde = jetzt.getSeconds();
var temp = '' + (Stunde>12 ? Stunde-12:Stunde);
var jahr = jetzt.getFullYear();
var Monat = jetzt.getMonth();
var d = jetzt.getDate();
var Woche = jetzt.getDay();
console.log(Woche); //Index var Wochen = ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"];
// konsole.log(temp);
wenn (Stunde === 0){
Temperatur = "12";
}
temp = temp + (Minute <10 ? ':0':":"+Minute);
temp = temp + (Sekunde <10 ? ':0':":"+Sekunde);
temp = temp + (Stunde>=12 ? 'PM':'AM');
temp = `${Jahr}${Monat}${T}${Temp}${Wochen[Woche]}`;
// konsole.log(temp);
nowDate.innerHTML = temp;
}
</Skript>
</body>
</html>Implementierungs-Effekt-Diagramm:
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:
|
<<: Bedeutung und Verwendung einer Linux-CD
>>: So geben Sie Speicherplatz unter CentOS 6 oder CentOS 7 frei
Artikel empfehlen
3 Funktionen der toString-Methode in js
Inhaltsverzeichnis 1. Drei Funktionen der toStrin...
Beispielcode zum Implementieren eines gleichbreiten Layouts auf verschiedene Arten mithilfe von CSS
Das in diesem Artikel beschriebene gleichbreite L...
MySQL-Datenbankindizes und -Transaktionen
Inhaltsverzeichnis 1. Inhaltsverzeichnis 1.1 Konz...
K3s-Erste-Schritte-Handbuch - Detailliertes Tutorial zum Ausführen von K3s in Docker
Was ist k3d? k3d ist ein kleines Programm zum Aus...
So verwenden Sie benutzerdefinierte Bilder in HTML zum Anzeigen von Kontrollkästchen
Wenn Sie zur Implementierung eines Kontrollkästch...
Methode zur Verhinderung von SSH-Cracking auf Linux-Servern (empfohlen)
1. Der Linux-Server konfiguriert /etc/hosts.deny ...
Win10 verwendet die Tsinghua-Quelle, um die PyTorch-GPU-Version schnell zu installieren (empfohlen)
Überprüfen Sie, ob Ihr CUDA installiert ist Geben...
Was ist ein MySQL-Index? Fragen Sie, wenn Sie es nicht verstehen
Inhaltsverzeichnis Überblick Vom Binärbaum zum B+...
So lösen Sie das Problem, dass die Scroll-Ansicht des WeChat-Applets nicht nach links und rechts verschoben werden kann
Ich arbeite derzeit an einem eigenen kleinen Prog...
Detaillierte Erklärung des Übergangsattributs einer einfachen CSS-Animation
1. Verständnis der Übergangsattribute 1. Das Über...
Der Prozess des Aufbaus einer Lampenarchitektur durch einen Docker-Container
Inhaltsverzeichnis 1. Ziehen Sie das Centos-Image...
Rückblick auf die besten Webdesign-Arbeiten 2012 [Teil 1]
Zum Beginn des neuen Jahres möchte ich meinen Fre...
Vergleichstabelle für chinesische und englische Dateinamen der Founder-Schriftbibliothek
Founder Type Library ist eine Schriftbibliothek, ...
Implementierung der Docker-Bereitstellung eines MySQL-Clusters
Nachteile einer Single-Node-Datenbank Große Inter...
Tiefgreifendes Verständnis des Javascript-Klassenarrays
js-Arrays sind wahrscheinlich jedem bekannt, da s...