Erstellen einer Digitaluhr basierend auf Jquery und CSS3 mit dem Quellcode-Download (CSS3)_jquery

Ich zeige Ihnen zuerst die Renderings. Interessierte Freunde können den Quellcode herunterladen.

Wirkungsdemonstration Quellcode-Download

Digitaluhr kann in einigen WEB-Countdown-Effekten, WEB-Wecker-Effekten und WEB-APPs auf Basis von HTML5 angewendet werden. In diesem Artikel erfahren Sie, wie Sie mit CSS3 und HTML einen sehr schönen Digitaluhr-Effekt erstellen, ohne Bilder zu verwenden.

HTML

Wir bereiten zunächst einen Uhrenbereich #clock auf der Seite vor und geben die anzuzeigenden Zahlen in Ziffern ein.

<div id="clock" class="light"> 
 <div class="display"> 
  <div class="digits"> 
   ...数字 
  </div> 
 </div> 
</div> 

Das von uns angezeigte Digitaluhrformat ist HH:mm:ss. Es besteht aus 8 Ziffern für Stunden, Minuten und Sekunden und 2 Trennzeichen. Die Zahl besteht beispielsweise aus 7 Bindestrichen 8 besteht aus 7. Bestehend aus kurzen horizontalen Balken, verwenden wir in HTML sieben Span-Elemente von .d1 bis .d7, um die Anzeigeeffekte verschiedener Zahlen über CSS zu bestimmen. Fügen Sie den obigen .digits den folgenden Code hinzu, verwenden Sie den Klassenwert von Null bis Neun, um den Stil der Zahlen 0-9 darzustellen, und verwenden Sie .dot, um das Intervallsymbol darzustellen.

<div class="eight"> 
 <span class="d1"></span> 
 <span class="d2"></span> 
 <span class="d3"></span> 
 <span class="d4"></span> 
 <span class="d5"></span> 
 <span class="d6"></span> 
 <span class="d7"></span> 
</div> 

CSS3

Wir setzen die Transparenz jedes Zahlenbereichs auf 0, was bedeutet, dass er standardmäßig unsichtbar ist. Wir verwenden die Eigenschaften :before und :after von CSS3, um den Eckeffekt des horizontalen Balkens festzulegen, der die Zahl darstellt.

#clock .digits div{ 
 text-align:left; 
 position:relative; 
 width: 28px; 
 height:50px; 
 display:inline-block; 
 margin:0 4px; 
} 
#clock .digits div span{ 
 opacity:0; 
 position:absolute; 
 -webkit-transition:0.25s; 
 -moz-transition:0.25s; 
 transition:0.25s; 
} 
#clock .digits div span:before, 
#clock .digits div span:after{ 
 content:''; 
 position:absolute; 
 width:0; 
 height:0; 
 border:5px solid transparent; 
} 
#clock .digits .d1{   height:5px;width:16px;top:0;left:6px;} 
#clock .digits .d1:before{ border-width:0 5px 5px 0;border-right-color:inherit;left:-5px;} 
#clock .digits .d1:after{ border-width:0 0 5px 5px;border-left-color:inherit;right:-5px;} 
然后，我们将数字span元素对应的dl~d7，根据数字来确定哪根横杠显示或不显示，即设置其opacity的值为1。
/* 0 */ 
#clock .digits div.zero .d1, 
#clock .digits div.zero .d3, 
#clock .digits div.zero .d4, 
#clock .digits div.zero .d5, 
#clock .digits div.zero .d6, 
#clock .digits div.zero .d7{ 
 opacity:1; 
} 

Schließlich wird das vollständige CSS-Dokument bereitgestellt, um den Code gemäß der Demo zu verbessern, und Sie können eine wunderschöne Digitaluhr sehen. Wie Sie die Digitaluhr wirklich zum Laufen bringen können , lesen Sie bitte in unserer Einführung der nächste Artikel.