Making a digital clock based on Jquery and CSS3 with source code download (CSS3)_jquery

I will show you the renderings first. Interested friends can download the source code.

Effect Demonstration Source code download

Digital clock can be applied in some WEB countdown effects, WEB alarm clock effects and WEB APP based on HTML5. This article will introduce to you how to use CSS3 and HTML to create a very beautiful digital clock effect without using any pictures.

HTML

We first prepare a clock area #clock on the page, and put the numbers to be displayed in .digits.

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

The digital clock format we are going to show is HH:mm:ss. It consists of 8 digits for hours, minutes and seconds and 2 separators ":". The number is composed of 7 dashes. For example, the number 8 consists of 7 Composed of short horizontal bars, we use seven span elements from .d1 to .d7 in HTML to determine the display effects of different numbers through CSS. Add the following code to the above .digits, use the value of class from zero to nine to represent the style of numbers 0-9, and use .dot to represent the interval symbol.

<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

We set the transparency of each number span to 0, which means it is invisible by default. We use the :before and :after properties of CSS3 to set the corner effect of the horizontal bar representing the number.

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

Finally, the complete css document is provided to improve the code according to the demo, and you can see a beautiful digital clock. So how to make the digital clock really run , please see our introduction in the next article.