Saturday, July 4, 2009

Đếm ngược sự kiện với jQuery

[FD's BlOg] - Bài viết này mình sẽ lại giới thiệu cho các bạn một ứng dụng khác từ jQuery, đó là tiện ích đếm ngược thời gian. Với việc đếm ngược tới từng giây.
Ở thủ thuật này ta có thể tùy chỉnh được kiểu chữ hiển thị. Khác với 1 số tiện ích đếm ngược khác.
Xem demo ở đây : DEMO

Hình minh họa kết quả :

- Như đã nói ở trên, các bạn có thể tùy chỉnh kiểu chữ, kích thước, màu sắc hiển thị theo ý mình, chỉnh cần cần chỉnh sửa code CSS trong các class tương ứng (xem hình minh họa ở trên sẽ rõ)

☼ Các bước thực hiện:
1. Vào bố cục
2. vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<style style="text/css">
.count_down{
padding: 3px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
font-weight:bold;
color:#f00;
}

.count_down sup{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#555;
font-weight:normal;

}
</style>

<script type="text/javascript" src="http://data.fandung.com/blog/demo/countdown-jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://data.fandung.com/blog/demo/countdown-jquery/countdown.js"></script>

4. Save template
5. Tạo 1 widget HTML/Javascript rồi dán đoạn code bên dưới vào:

<div id="count_down_container"></div>

<script type="text/javascript">
var currentyear=new Date().getFullYear()
var target_date=new cdtime("count_down_container", "December 31, "+currentyear+" 0:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>

- Chú ý đoạn code màu đỏ, đây chính là mốc thời gian để đếm ngược. và các tháng trong năm phải viết bằng tiếng anh đúng chính tả.

Power by Dynamic
Chúc các bạn thành công.
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 nhận xét

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2025 Sổ ghi chú
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSSComments RSS
Back to top