Đếm ngược sự kiện với jQuery - Tạp chí thời trang và làm đẹp
vietnamese Tiếng Việt english English
Hôm nay: Chủ nhật, ngày 13 tháng 04 năm 2025
Home »

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

Thứ Sáu, 3 tháng 7, 2009
[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.
Tags: , ,

Comments[ 0 ]


Đăng nhận xét