[CSS3技术]使用jQuery和CSS3实现一个数字时钟

[tr][td]



我们经常会在网站中看见一个时钟的效果。今天向大家分享一个使用jQuery和CSS3实现一个数字时钟教程。


代码：



 
 

 

 

 

 




 
 
 
 
 
 
 




CSS


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


jquery code


$(function(){
 
 // Cache some selectors
 
 var clock = $('#clock'),
 alarm = clock.find('.alarm'),
 ampm = clock.find('.ampm');
 
 // Map digits to their names (this will be an array)
 var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');
 
 // This object will hold the digit elements
 var digits = {};
 
 // Positions for the hours, minutes, and seconds
 var positions = [
 'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'
 ];
 
 // Generate the digits with the needed markup,
 // and add them to the clock
 
 var digit_holder = clock.find('.digits');
 
 $.each(positions, function(){
 
 if(this == ':'){
 digit_holder.append('');
 }
 else{
 
 var pos = $('');
 
 for(var i=1; i