Production of digital clock based on jquery and CSS3 source Download (jquery chapter) _jquery

Nonsense not to say, first to show you the effect of the picture, interested friends continue to look down OH

View Demo Source Download

Html

And previous article: using jquery and CSS3 to make the same HTML structure as the digital clock (CSS3), just one more >date to show the date and week.

<div id= "Clock" class= "Light" > 
 <div class= "display" > 
  <div class= "date" ></div> 
  <div class= "digits" ></div> 
 </div> 

Jquery

CSS Code please refer to the previous article, this article no longer verbose, directly look at the jquery code.

First we define the parameters, define an array of class names to call numbers, define the name of the Chinese week, and define the location of the seconds.

$ (function () { 
 var clock = $ (' #clock '); 
 Define numeric array 0-9 
 var digit_to_name = [' zero ', ' one ', ' two ', ' three ', ' four ', ' five ', ' six ', ' seven ', ' eight ', ' nine ']; 
 Define Week 
 var weekday = [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ']; 
 var digits = {}; 
 Define the minutes and seconds position 
 var positions = [ 
  ' H1 ', ' H2 ', ': ', ' M1 ', ' m2 ', ': ', ' s1 ', ' S2 ' 
 ]; 

Then build the digital clock in minutes. In the previous article we placed the HTML structure of the digital clock directly in the HTML, and now we use jquery to handle the display of the clock and to build the digital clock through the Append () method.

var digit_holder = Clock.find ('. digits '); 
 $.each (positions, function () { 
  if (this = = ': ') { 
   digit_holder.append (' <div class= ' dots ' >) 
  } 
  else{ 
   var pos = $ (' <div> '); 
   for (var i=1 i<8; i++) { 
    pos.append (' <span class= ' d ' + i + ' "> '); 
   } 
   Digits[this] = pos; 
   Digit_holder.append (POS); 
   
 

Finally, we're going to get the clock running. Call once per second update_time () function, in Update_time (), we first use Moment.js to format time, about Moment.js Introduction please refer to this site article: use moment.js easy to manage the date and time. Then, according to the current time and minutes, set the class attribute of the seconds and minutes respectively, which shows the current time and seconds digits. Then continue to use Moment.js to format the date and week, and finally complete the walking digital clock, see the following code:

$ (function () { 
 ... 
 ) (function Update_time () { 
  //call Moment.js to format time 
  var now = Moment (). Format ("Hhmmss"); 
  Digits.h1.attr (' class ', digit_to_name[now[0]]); 
  Digits.h2.attr (' class ', digit_to_name[now[1]]); 
  Digits.m1.attr (' class ', digit_to_name[now[2]]); 
  Digits.m2.attr (' class ', digit_to_name[now[3]]); 
  Digits.s1.attr (' class ', digit_to_name[now[4]]); 
  Digits.s2.attr (' class ', digit_to_name[now[5]]); 
  var date = Moment (). Format ("YYYY year mm month DD day"); 
  var week = weekday[moment (). Format (' d ')]; 
  $ (". Date"). html (date + ' + week); 
  Run once per second 
  settimeout (update_time, 1000); 
 }) ();