apkm-search

Live Counter đơn giản với jQuery và CSS

Một cách đơn giản để có được live counter chỉ với vài dòng code HTML.CSS và JS.

Trong bài viết này mình sẽ giải thích về Live Counter và viết một demo nhỏ cho các bạn.Bài viết này sẽ giúp ích cho bạn nếu bạn muốn trang trí cho phần thống kê trên website của mình như tổng số lượt view, lượng subcribes, lượng bài viết,… hiện có trên site một cách sinh động hơn. Để giải thích về Live Counter thì bạn có thể xem qua bài viết 26 mẫu Under Construction Page tuyệt đẹp và miển phí bạn sẽ thấy một số mẫu có đồng hồ đếm ngược đó cũng là một dạng Live Counter. Bạn có thể hiểu đơn giản là bộ đếm tăng hay giảm theo thời gian. live Counter don gian voi jquery va CSS Sau khi làm theo hướng dẩn này bạn sẽ được như hình phía trên. Bây giờ chúng ta sẽ vào phần chính là viết code: Phần đầu là HTML:

[code language=”html”]
<div class=”stat”>
<span class=”stat-count”>8</span>
<p class=”stat-detail”>Subscribers</p>
</div>
[/code]

Đây là đoạn HTML mẫu với giá trị đếm kết thúc là 4200 tức là khi chạy đến 4200 thì dừng.Bạn có thể tạo ra nhiều đoạn HTML cùng chạy với nhau ví dụ như:

Đây là đoạn CSS mình làm mẫu nếu bạn biết thì có thể style lại cho live counter của mình phù hợp với theme mà bạn đang dùng.

Giờ chúng ta sẽ làm hiệu ứng đếm với jQuery:

Giá trị sẽ tăng sau mổi 0.05 giây, bạn có thể thay giá trị này cho phù hợp với site của mình.Đây là một hướng dẫn đơn giản nên nếu bạn muốn những live counter phức tạp hơn có thể tham khảo trên google. Chúc các bạn thành công với hướng dẩn này ! Bạn có thể xem qua demo ở đây và có thể view source nhé ! Demo live counter

BÌNH LUẬN BÀI VIẾT

Leave a Reply

2 Comments on "Live Counter đơn giản với jQuery và CSS"

Notify of
avatar
Sort by:   newest | oldest
Chứng chỉ kế toán trưởng3 năm gắn bó cùng NQDung.COMLevel 1

Bạn có thể hướng dẫn cách show user online và BOTS tìm kiếm cho WP theo IP được chứ ?

wpDiscuz