JS realisiert Bild Digitaluhr
|
In diesem Artikelbeispiel wird der spezifische JS-Code zur Realisierung der digitalen Bilduhr als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt Zunächst ist dies das Bild, das wir vorbereitet haben
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
</Stil>
</Kopf>
<Text>
<div>
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/10.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/10.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
</div>
<Skripttyp="text/javascript">
//Funktion Funktion get(){
//Holen Sie sich das Seiten-Bild
var img = document.getElementsByTagName('img');
//Zeit abrufen var date=new Date();
var Stunde = Datum.getHours();
var minute=date.getMinutes();
var secind=date.getSeconds();
//Füge 0 ein
wenn(Stunde<10){
Stunde='0'+Stunde;
}sonst wenn(Minute<0){
Minute='0'+Minute;
}sonst wenn (zweite) {
Sekunde='0'+Sekunde;
}
// Zeichenfolgenverkettung img[0].src='img/'+parseInt(hour/10)+'.png';
img[1].src='img/'+stunde%10+'.png';
img[3].src='img/'+parseInt(minute/10)+'.png';
img[4].src='img/'+minute%10+'.png';
img[6].src='img/'+parseInt(secind/10)+'.png';
img[7].src='img/'+secind%10+'.png';
}
erhalten();
Intervall festlegen(get,1000);
//Aufruf zum Aktualisieren jede Sekunde</script>
</body>
</html>Endgültige Umsetzung
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:
|
<<: Detaillierte Erklärung des durch einen Schrägstrich / verursachten Mordes in Nginx proxy_pass
>>: Lösung für das Problem des MySQL-Master-Slave-Switch-Kanals
Artikel empfehlen
Detaillierte Erläuterung der CSS-Bildspleißtechnologie (Sprite-Bild)
CSS-Bildspleißtechnologie 1. Bildzusammenfügung B...
JavaScript navigator.userAgent erhält Browserinformationen – Fallerklärung
Der Browser ist für uns wahrscheinlich das vertra...
Beim Website-Design sollte auf die Farbhierarchie geachtet werden
Ich habe kürzlich gesagt, dass Design ein Gefühl d...
mysql-5.7.21-winx64 kostenlose Installationsversion Installation - Windows-Tutorial detaillierte Erklärung
1 Herunterladen Die Adresse lautet: https://dev.m...
Detaillierte Erklärung des Whereis-Beispiels zum Suchen eines bestimmten Programms in Linux
Linux findet ein bestimmtes Programm, wo ist Der ...
IDEA-vollständiger Code zum Herstellen einer Verbindung mit einer MySQL-Datenbank und Durchführen von Abfragevorgängen
1. Schreiben Sie zuerst eine Mysql-Link-Einstellu...
So verwenden Sie Axios, um Netzwerkanforderungen in React Native zu stellen
In der Front-End-Entwicklung gibt es viele Möglic...
Analyse des allgemeinen MySQL-Abfrageprotokolls und des langsamen Abfrageprotokolls
Die Protokolle in MySQL umfassen: Fehlerprotokoll...
HTML/CSS-Grundlagen - Einige Vorsichtsmaßnahmen beim Schreiben von HTML-Code (unbedingt lesen)
Die Warnhinweise in diesem Artikel haben nichts m...
So optimieren Sie die MySQL-Indexfunktion basierend auf dem Schlüsselwort „Explain“
EXPLAIN zeigt, wie MySQL Indizes verwendet, um Au...
Besprechen Sie den Wert von Webstandards aus vier Aspekten mit einer Mindmap
Ich habe einige Werte grob aufgelistet, um die Di...
Detaillierte Erklärung zum Ziehen von Tabellenspalten mit Vue Element Sortablejs
1. css: dragTable.css @Zeichensatz "UTF-8&qu...
Aktivieren und Konfigurieren des MySQL-Protokolls für langsame Abfragen
Einführung Das MySQL-Protokoll für langsame Abfra...
Sechs Vererbungsmethoden in JS und ihre Vor- und Nachteile
Inhaltsverzeichnis Vorwort Vererbung von Prototyp...
Tutorial zum schnellen Bereitstellen eines Nebula Graph-Clusters mit Docker Swarm
1. Einleitung In diesem Artikel wird beschrieben,...