Create a digital clock with source code download Based on jQuery and CSS3 (jquery) _ jquery

This article is based on jquery to let the digital clock really run and implement a digital clock with a date and a week on the web page. The effect is very lifelike. If you are interested, let's take a look, let's show you what you are interested in.

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.

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('
');   }   else{    var pos = $('
');    for(var i=1; i<8; i++){     pos.append('');    }    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 );})();});