Cách tạo động hồ kỹ thuật số bằng Jquery và CSS3

Để blog hay website online bạn thêm sinh động thì việc thêm 1 chiếc đồng hồ okỹ thuật số bằng Jquery và css3 sẽ làm weblog/web bạn càng thêm thân thiện.
cach tao dong ho ky thuat so bang Jquery va css3
– Để làm được điều này đầu tiên bạn tạo 1 file

index.html

<div id="clock" classification="gentle">
    <div class="show">
        <div classification="weekdays"></div>
        <div category="ampm"></div>
        <div type="alarm"></div>
        <div class="digits"></div>
    </div>
</div>

– Tiếp theo là tạo 1 file css ở đây mình đặt đường dẫn css là ets/css/kinds.css với nội dung

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

– Để đồng hồ hoạt động được chúng ta cần 1 hàm Jquery để tạo ra đánh dấu cho mỗi số và thiết lập một bộ đếm thời gian để cập nhật các thời gian mỗi giây. Tiếp theo tạo 1 file jquer theo đường dẫn property/js/script.js với nội dung

$(operate()

    // Cache some selectors

    var clock = $('#clock'),
        alarm = clock.to find('.alarm'),
        ampm = clock.find('.ampm');

    // Map digits to their names (this shall be an array)
    var digit_to_name = 'zero one two three 4 five six seven eight nine'.break up(' ');

    // This object will hold the digit components
    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.in finding('.digits');

    $.each(positions, operate()

        if(this == ':')
            digit_holder.append('</pre>
<div class="dots">');

 else

 var pos = $('
<div>
');

 for(var i=1; i<eight; i++)
 pos.append('<span class="d' + i + '">');

 // Set the digits as key:worth pairs in the digits object
 digits[this] = pos;

 // Add the digit parts to the page
 digit_holder.append(pos);

 );

 // Add the weekday names

 var weekday_names = 'MON TUE WED THU FRI SAT solar'.break up(' '),
 weekday_holder = clock.in finding('.weekdays');

 $.every(weekday_names, operate()
 weekday_holder.append('<span>' + this + '</span>');
 );

 var weekdays = clock.find('.weekdays span');

 // Run a timer each 2nd and replace the clock

 (function update_time()

 // Use second.js to output the present time as a string
 // hh is for the hours in 12-hour structure,
 // mm - minutes, ss-seconds (all with major zeroes),
 // d is for day of week and A is for AM/PM

 var now = second().layout("hhmmssdA");

 digits.h1.attr('type', digit_to_name[now[0]]);
 digits.h2.attr('type', digit_to_name[now[1]]);
 digits.m1.attr('type', digit_to_name[now[2]]);
 digits.m2.attr('category', digit_to_name[now[3]]);
 digits.s1.attr('class', digit_to_name[now[4]]);
 digits.s2.attr('class', digit_to_name[now[5]]);

 // The library returns Sunday as the primary day of the week.
 // silly, i know. Lets shift all the days one position down,
 // and make Sunday remaining

 var dow = now[6];
 dow--;

 // Sunday!
 if(dow < zero)
 // Make it last
 dow = 6;

 // Mark the energetic day of the week
 weekdays.removeClass('lively').eq(dow).addClass('active');

 // Set the am/pm textual content:
 ampm.text(now[7]+now[8]);

 // time table this function to be run once more in 1 sec
 setTimeout(update_time, 1000);

 )();

 // switch the theme

 $('a.button').click(operate()
 clock.toggleClass('gentle darkish');
 );

);

Bây giờ bạn sẽ có chiếc đồng hồ okỹ thuật số bằng Jquery và css3 rồi đó. Bạn có thể download code để xem

Leave a Comment

© 2011 Vannamdl.net, Development content by Nam Còi . Hosting Sponsored by VDATA.VN

Scroll to top