Vollständiger Code zur Implementierung des beliebten Astronauten-Zifferblatts basierend auf JavaScript

1. Effektanzeige

Ein in JavaScript geschriebenes Astronauten-Zifferblatt.

http://xiazai.jb51.net/202103/yuanma/Watch_jb51.rar

2. Quellcode

HTML Quelltext

<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>

JS-Code

// 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;
 }
 
}

CSS Code

.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:

So implementieren Sie dynamische Dashboards mit RGraph in JavaScript
js realisiert Zifferblattuhr und Kreisbewegung
Ein Beispiel für die Verwendung von D3.js zur Implementierung eines einfachen und praktischen dynamischen Dashboards
js Canvas implementiert prozentuales Dashboard passend für mobile Endgeräte
js Canvas imitiert das Alipay Sesame Credit-Dashboard

<<: Detaillierte Erklärung der Funktionen IFNULL() und COALESCE() zum Ersetzen von Null in MySQL

>>: So verwenden Sie die Glog-Protokollbibliothek in einer Linux-Umgebung