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

[php]<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>
[/php]

– 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

[css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” highlight=”1-3,6,9″ htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true” title=”ets/css/styles.css”]
/* 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;
[/css]

– Để đồ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

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Leave a Comment

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

Scroll to top