Download the digital clock source code based on jQuery and CSS3 (jquery) and jquerycss3

Download the digital clock source code based on jQuery and CSS3 (jquery) and jquerycss3

I don't want to talk about it anymore. I 'd like to show you more about it.

View demo source code download

HTML

Similar to the previous article: Using jQuery and CSS3 to create an HTML structure with the same digital clock (CSS3), there is only 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> </div> 

JQuery

For details about CSS code, refer to the previous article. This article will not be too long-winded. You can directly read jQuery code.

First, we define the parameter, define the class name array used to call numbers, define the Chinese week name, and define the time, minute, and second positions.

$ (Function () {var clock = $ ('# clock'); // defines the number array 0-9 var digit_to_name = ['zero ', 'one ', 'two', 'three ', 'four', 'five', 'six', 'seven', 'Eight', 'nine']; // define the weekly var weekday = ['sunday', 'monday', 'tues', 'wedned', 'thurs', 'Friday', 'satur']; var digits = {}; // defines the time-and-second location var positions = ['h1 ', 'h2', ':', 'm1 ', 'm2 ',':', 's1', 's2'];});

Then construct the hour, minute, and second of the digital clock. In the previous article, we placed the html structure of the digital clock directly in html. Now we use jQuery to process the display of the clock and use the append () method to construct the digital clock.

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, let's run the clock. Call the update_time () function once every second. In update_time (), we first use moment. js to format the time, about moment. for details about js, refer to this article: Use moment. js allows you to easily manage dates and times. Set the class attribute of the number of hours, minutes, And seconds based on the current time and second, that is, display the number of the current time and second. Next, we will continue to use moment. js to format the date and week, and finally complete the moving digital clock. Please refer to the following code:

$ (Function (){... (function update_time () {// call moment. js to format the 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 ("mm dd, YYYY"); var week = weekday [moment (). format ('D')]; $ (". date "pai.html (date +'' + week); // run setTimeout (update_time, 1000) ;}) () ;}) every second );})();});