Vollständiger Code zur Implementierung des beliebten Astronauten-Zifferblatts basierend auf JavaScript
1. Effektanzeige
http://xiazai.jb51.net/202103/yuanma/Watch_jb51.rar
2. Quellcode
<html>
<Kopf>
<title>Astronauten-Zifferblatt</title>
<meta charset="UTF-8">
<link href="./assets/css/style.css" rel="externes Nofollow" rel="stylesheet">
<script src="./assets/js/timeGeneration.js"></script>
</Kopf>
<Text>
<div Klasse="jun-meter">
<div Klasse="jun-time-hh" id="hh"></div>
<div Klasse="jun-time-hl" id="hl"></div>
<div Klasse="jun-time-rect"></div>
<div Klasse="jun-human"></div>
<div Klasse="jun-time-mh" id="mh"></div>
<div Klasse="jun-time-ml" id="ml"></div>
<div Klasse="jun-time-sh" id="sh"></div>
<div Klasse="jun-time-sl" id="sl"></div>
<div Klasse="jun-date" id="date"></div>
<div Klasse="jun-calendar-date" id="calendarDate"></div>
</div>
</body>
<Skript>
Funktion WatchMeter() {
// DOM initialisieren
dies._initDom()
// Aktualisiere this.update()
this.date = neue Zeitgenerierung()
dies._render(dieses.date.getDate(), dieses.date.getCalendarDate(), dieses.date.getTime())
}
// Den Prototyp ändern WatchMeter.prototype = {
Konstruktor: WatchMeter,
// Dom initialisieren
_initDom: Funktion () {
dies.elem = {}
dies.elem.hh = document.getElementById('hh')
dies.elem.hl = document.getElementById('hl')
dies.elem.mh = document.getElementById('mh')
dies.elem.ml = document.getElementById('ml')
dies.elem.sh = document.getElementById('sh')
dies.elem.sl = document.getElementById('sl')
dieses.elem.date = document.getElementById('date')
this.elem.calendarDate = document.getElementById('calendarDate')
},
// Update aktualisieren: Funktion () {
var _this = dies
setzeIntervall(Funktion () {
_this._render(_this.date.getDate(), _this.date.getCalendarDate(), _this.date.getTime())
}, 1000)
},
// Rendering_render: Funktion (Datum, Kalenderdatum, Uhrzeit) {
this._setNumberImage(this.elem.hh, Zeit[0])
this._setNumberImage(this.elem.hl, Zeit[1])
this._setNumberImage(this.elem.mh, Zeit[2])
this._setNumberImage(this.elem.ml, Zeit[3])
this._setNumberImage(this.elem.sh, Zeit[4])
this._setNumberImage(this.elem.sl, Zeit[5])
this.elem.date.innerText = Datum[2] + " " +Datum[0] + "-" +Datum[1]
this.elem.calendarDate.innerText = Kalenderdatum
},
// Setze das digitale Bild_setNumberImage: function (elem, value) {
elem.style.backgroundImage = "url(./assets/img/" + Wert + ".svg)";
}
}
var meinWatchMeter = neues WatchMeter()
</Skript>
</html>
// Zeit nach Mond- und Gregorianischem Kalender generieren Funktion TimeGeneration() {
}
ZeitGeneration.prototype = {
Konstruktor: TimeGeneration,
WEEKDAY_NAME: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
NUMBER_STRING: "eins zwei drei vier fünf sechs sieben acht neun zehn",
MONTH_STRING: "Monat, Dienstag, Mittwoch, Donnerstag, Freitag, Samstag, Samstag, August, September, Winter",
MONTH_ADD: [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
CALENDAR_DATA: [0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5, 0x50DA9, 0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B, 0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5, 0x4B6, 0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25, 0x81AA5, 0xB54, 0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957, 0x5092F, 0x497, 0x64B, 0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5, 0x20B55, 0x56A, 0x7155B, 0x25D, 0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57, 0x52B, 0xA93, 0x40E95],
_getBit: Funktion (m, n) {
Rückgabe (m >> n) & 1;
},
// Das Zeitarray abrufen
getTime: Funktion () {
var Zeit = neues Datum();
return [parseInt(Zeit.getHours() / 10),
parseInt(Zeit.getHours() % 10),
parseInt(Zeit.getMinutes() / 10),
parseInt(Zeit.getMinutes() % 10),
parseInt(Zeit.getSeconds() / 10),
parseInt(Zeit.getSeconds() % 10)]
},
// Datums-Array des gregorianischen Kalenders abrufen
getDate: Funktion () {
var date = neues Datum();
zurückkehren [
date.getMonth() + 1,
date.getDate(),
dies.WEEKDAY_NAME[date.getDay()]
]
},
// Holen Sie sich die Datumszeichenfolge des Mondkalenders
getCalendarDate: Funktion () {
var Kalender = neues Datum();
var tmp = calendar.getFullYear();
wenn (tmp < 1900) {
tmp += 1900;
}
var total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + this.MONTH_ADD[calendar.getMonth()] + calendar.getDate() - 38;
wenn (calendar.getFullYear() % 4 == 0 && calendar.getMonth() > 1) {
insgesamt++;
}
var isEnd = false;
var n, m, k
für (m = 0; ; m++) {
k = (diese.CALENDAR_DATA[m] < 0xfff) ? 11 : 12;
für (n = k; n >= 0; n--) {
wenn (Gesamt <= 29 + this._getBit(this.CALENDAR_DATA[m], n)) {
istEnd = wahr;
brechen;
}
gesamt = gesamt - 29 - this._getBit(this.CALENDAR_DATA[m], n);
}
wenn (istEnde) abbrechen;
}
var Monat = k - n + 1;
var Tag = Gesamt;
wenn (k == 12) {
wenn (Monat == Math.floor(this.CALENDAR_DATA[m] / 0x10000) + 1) {
Monat = 1 - Monat;
}
wenn (Monat > Math.floor(this.CALENDAR_DATA[m] / 0x10000) + 1) {
Monat--;
}
}
var tmp = "";
wenn (Monat < 1) {
tmp += "(Schaltjahr)";
tmp += this.MONTH_STRING.charAt(-Monat - 1);
} anders {
tmp += this.MONTH_STRING.charAt(Monat - 1);
}
tmp += "Monat";
tmp += (Tag < 11) ? "Anfang" : ((Tag < 20) ? "zehn" : ((Tag < 30) ? "zwanzig" : "dreißig"));
wenn (Tag % 10 != 0 || Tag == 10) {
tmp += this.NUMBER_STRING.charAt((Tag - 1) % 10);
}
temporär zurückgeben;
}
}
.jun-meter {
Position: relativ;
Breite: 640px;
Höhe: 640px;
Hintergrundbild: URL("../img/ring.svg");
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: 100 %;
Rand: automatisch;
obere Marge: 7 %;
}
.jun-time-rect {
Position: absolut;
Breite: 30px;
Höhe: 80px;
links: 275px;
oben: 180px;
Hintergrundbild: url("../img/rect.svg");
Hintergrundgröße: 40px 40px;
}
.jun-time-hh {
Position: absolut;
Breite: 100px;
Höhe: 100px;
links: 140px;
oben: 170px;
Hintergrundbild: url("../img/8.svg");
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: 100 %;
}
.jun-time-hl {
Position: absolut;
Breite: 100px;
Höhe: 100px;
links: 200px;
oben: 170px;
Hintergrundbild: url("../img/8.svg");
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: 100 %;
}
.jun-time-mh {
Position: absolut;
Breite: 100px;
Höhe: 100px;
links: 290px;
oben: 170px;
Hintergrundbild: url("../img/8.svg");
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: 100 %;
}
.jun-time-ml {
Position: absolut;
Breite: 100px;
Höhe: 100px;
links: 350px;
oben: 170px;
Hintergrundbild: url("../img/8.svg");
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: 100 %;
}
.jun-time-sh {
Position: absolut;
Breite: 60px;
Höhe: 60px;
links: 430px;
oben: 208px;
Hintergrundbild: url("../img/8.svg");
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: 100 %;
}
.jun-time-sl {
Position: absolut;
Breite: 60px;
Höhe: 60px;
links: 470px;
oben: 208px;
Hintergrundbild: url("../img/8.svg");
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: 100 %;
}
.jun-Kalenderdatum {
Position: absolut;
Breite: 120px;
Höhe: 30px;
links: 460px;
oben: 310px;
Zeilenhöhe: 30px;
Schriftgröße: 20px;
Textausrichtung: zentriert;
}
.jun-Datum {
Position: absolut;
Breite: 120px;
Höhe: 30px;
links: 460px;
oben: 345px;
Zeilenhöhe: 30px;
Schriftgröße: 20px;
Textausrichtung: zentriert;
}
.jun-Mensch{
Position: absolut;
Breite: 150px;
Höhe: 150px;
links: 250px;
oben: 280px;
Hintergrundbild: url("../img/human.gif");
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: 100 %;
}Damit ist der Artikel über den vollständigen Code zur Implementierung des Promi-Astronauten-Zifferblatts auf JavaScript-Basis abgeschlossen. Weitere Informationen zur Implementierung des Promi-Astronauten-Zifferblatts mit JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Detaillierte Erklärung der Funktionen IFNULL() und COALESCE() zum Ersetzen von Null in MySQL
>>: So verwenden Sie die Glog-Protokollbibliothek in einer Linux-Umgebung
Artikel empfehlen
Detaillierte Erläuterung des Konfigurationsprozesses des logischen Linux-LVM-Volumes (Erstellen, Erhöhen, Reduzieren, Löschen, Deinstallieren)
Detaillierte Erläuterung des Konfigurationsprozes...
Detaillierte Erklärung zur Verwendung der Click-to-Switch-Bildkomponente im Vue-Kartenstil
In diesem Artikel wird die Click-to-Switch-Bildko...
Praktische Hinweise zur Installation von Jenkins mit Docker-Compose
Erstellen Sie ein Verzeichnis cd /usr/local/docke...
18 erstaunliche Verbindungen zwischen Interaktionsdesign und Psychologie
Designer müssen Psychologie verstehen, indem sie ...
Eine kurze Diskussion über die Verwendung von Vue zur Fertigstellung des mobilen APK-Projekts
Inhaltsverzeichnis Grundkonfiguration Eintragsdat...
Detaillierte Analyse der Replikation in MySQL
1.MySQL-Replikationskonzept Dies bedeutet, dass d...
Lösung für den Fall, dass der Tomcat-Server tomcat7w.exe nicht öffnen kann
Beim Konfigurieren des Tomcat-Servers ist mir heu...
JS-Interviewfrage: Kann forEach aus der Schleife aussteigen?
Als mir diese Frage gestellt wurde, war ich unwis...
Natives JavaScript zum Erreichen von Skinning
Der spezifische Code zur Implementierung von Skin...
Verwenden Sie js in html, um die lokale Systemzeit abzurufen
Code kopieren Der Code lautet wie folgt: <div ...
Redission-Tomcat implementiert schnell die Bereitstellung von einer einzelnen Maschine zur Bereitstellung auf mehreren Maschinen
Vorwort In den Anfangsphasen einiger Projekte wer...
So verwenden Sie dl(dt,dd), ul(li), ol(li) in HTML
HTML <dl> Tag #Definition und Verwendung Da...
Beispiel für das Hinzufügen eines Musikvideos zu einer HTML-Seite
1. Video-Tag Unterstützt die automatische Wiederg...
Eine kurze Analyse der Verwendung von Rahmen- und Anzeigeattributen in CSS
Einführung in Rahmeneigenschaften border -Eigensc...
js, um den Zahlungs-Countdown zu realisieren und zur Startseite zurückzukehren
Zahlungs-Countdown, um zur Startseite zurückzukeh...