Créer une horloge numérique basée sur Jquery et CSS3 avec téléchargement du code source (CSS3)_jquery

Je vais d'abord vous montrer les rendus. Les amis intéressés peuvent télécharger le code source.

Démonstration d'effet Téléchargement du code source

L'horloge numérique peut être appliquée dans certains effets de compte à rebours WEB, effets de réveil WEB et WEB APP basés sur HTML5. Cet article vous présentera comment utiliser CSS3 et HTML pour créer un très bel effet d'horloge numérique sans utiliser d'images.

HTML

Nous préparons d'abord une zone d'horloge #clock sur la page, et mettons les chiffres à afficher en .digits.

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

Le format de l'horloge numérique que nous allons afficher est HH:mm:ss. Il se compose de 8 chiffres pour les heures, les minutes et les secondes et de 2 séparateurs ":". Le nombre est composé de 7 tirets. 8 se compose de 7 Composés de courtes barres horizontales, nous utilisons sept éléments span de .d1 à .d7 en HTML pour déterminer les effets d'affichage de différents nombres via CSS. Ajoutez le code suivant aux .digits ci-dessus, utilisez la valeur de classe de zéro à neuf pour représenter le style des nombres 0 à 9 et utilisez .dot pour représenter le symbole d'intervalle.

<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

Nous définissons la transparence de chaque étendue de nombres à 0, ce qui signifie qu'elle est invisible par défaut. Nous utilisons les propriétés :before et :after de CSS3 pour définir l'effet de coin de la barre horizontale représentant le nombre.

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

Enfin, le document CSS complet est fourni pour améliorer le code selon la démo, et vous pouvez voir une belle horloge numérique Alors comment faire vraiment fonctionner l'horloge numérique , veuillez consulter notre introduction dans. le prochain article.