Hướng dẫn cài COUNTER-UP jQuery Plugin

JavaScript càng ngày càng phổ biến và hỗ trợ nhiều mảng. Khi làm về phần khách hàng, hay những dự án đã làm được… Việc thể hiện số liệu là thiết yếu và để làm những con số này đẹp hơn một thư viện có tên Counter-up sẽ giúp bạn. Trong bài viết này, mình sẽ Hướng dẫn cài COUNTER-UP jQuery Plugin.

Giới thiệu

Counter-Up là một ứng dụng jQuery nó chuyển động các con số từ zero trở đi. Nó hỗ trợ về đếm:

  • số nguyên 12345
  • số thực 0.1234
  • Số được định dạng 1,234,567.00

Điểm nổi trội:

  • Tự động phát hiện số nguyên, số thực và số được định dạng.
  • Kích thước nhẹ: ~1kb
  • Tối thiểu cài đặt

Yêu cầu waypoints.js

Bạn có thể:

Sử dụng:

Tổng quan, ta có:

Đó, thực sự đơn giản, bạn chỉ cần copy cái cục này, và paste nó vào file HTML. Và nó sẽ chạy luôn.

Giải thích:

Ở đây, “counterUp” sẽ làm nhiệm vụ kích hoạt, với 2 biến là

  • delay: thời gian tạm hoãn tính bằng mili-giây
  • time: thời gian số chạy

Tại body:

  • <span class=”counter”>1,234,567</span>: Đây sẽ là nơi được jQuery tìm đến và chạy số

Và chúng ta include nhanh thư viện bằng:

Kết luận

Đối với một thư viện phát triển bởi JavaScript đã khá là dễ sử dụng rồi, nhưng thư viện này còn đơn giản hơn thế nữa. Đừng ngại mà không thử COUNTER-UP ngay nhé!

Có thể bạn thích: WOW.js là gì? Và tại sao nên dùng nó

Bài viết liên quan

  • React Native: Nó là gì? và, Tại sao dùng nó?

    Không sai khi nói rằng điện thoại di động là một phần linh hồn của mỗi người. Và khi nói đến nó, những lập trình viên chúng ta sẽ nghĩ…

  • Chạy ngày, giờ hiện tại với PHP và JavaScript

    Việc lấy ra ngày giờ chính xác với thời gian thực và hiển thị nó ra website, tưởng chừng là đơn giản, nhưng thực ra không phải đơn giản lắm. Trong bài viết này mình sẽ chia sẻ với các bạn về code Chạy ngày, giờ hiện tại với PHP và JavaScript.

  • Headroom Js – Thư viện giúp ẩn hiện header chuyên nghiệp

    Headroom Js  là một thư viện JavaScript giúp bạn ẩn hiện dễ dàng phần header khi lăn chuột trong trang. Thư viện này tương đối hữu dụng và phổ biến đối với lập trình viên web. Trong bài viết này mình xin giới thiệu với các bạn Headroom Js – Thư viện giúp ẩn hiện header chuyên nghiệp.

  • Scrolling event javascript, bắt sự kiện Cuộn Trang với Javascript.

    Sự kiện Cuộn Trang hay Scrolling event là cái mà chúng ta vẫn thường thực hiện khi vào một website. Do nó xảy thường xuyên, nên hãy bắt lấy nó để tương tác nhiều hơn với người dùng. Trong bài viết này mình sẽ phân tích một ví dụ về Scrolling event javascript, bắt sự kiện Cuộn Trang với Javascript.

  • Countdown Timer – Đặt giờ đếm ngược với mỗi khách vào Web – Không bị reset khi F5

    Để kích thích khách hàng, người vào website mua sản phẩm, người ta đã sáng tạo ra phương pháp sử dụng giờ đếm ngược trong một khoảng thời gian nhất định. Tại bài này mình sẽ hướng dẫn các bạn tạo Countdown Timer – Đặt giờ đếm ngược với mỗi khách vào Web – Không bị reset khi F5 bằng JavaScript thuần.

  • Slider Syncing – Kết nối giữa các slider với nhau – Slick Slider

    Slider Syncing hay kết nối giữa các slider với nhau. Đây là yêu cầu tương đối khó, nếu chúng ta code tay. Tuy nhiên ở bài viết này mình sẽ hướng dẫn các bạn hoàn thành nó nhanh nhất và đơn giản nhất có thể với Slick Slider.

Bài viết cùng chuyên mục

Leave a Reply

avatar
  Subscribe  
Notify of
Thuê Tôi