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

Source: Internet
Author: User
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 );})();});

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.