Cách Tạo Count Up Number JavaScript

Cách Tạo Count Up Number JavaScript


Ngày 3 Tháng 11 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo chức năng count up bằng jquery cho thiết kế và phát triển website nha.

Count Up Number JavaScript

HTML

Đầu tiên chúng ta sẽ đi vào tạo cấu trúc cho chức năng này thông qua các thẻ HTML cũng như thêm các thư viện cấn thiết cho chức năng count up như Jquery, thư viện counter up js và waypoints.js. Để hiểu rõ hơn bạn xem ở đoạn code dưới đây nha:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Count Up Jquery - Niem Vui Lap Trinh</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
</head>
<body>
  <h1>Cách Tạo Count Up Jquery</h1>
     <div class="counter-up">
    <div class="content">
      <div class="box">
        <div class="icon"><i class="fas fa-history"></i></div>
        <div class="counter">562</div>
        <div class="text">Thời Gian Làm Việc</div>
      </div>
      <div class="box">
        <div class="icon"><i class="fas fa-gift"></i></div>
        <div class="counter">125</div>
        <div class="text"> Project Hoàn Thành</div>
      </div>
      <div class="box">
        <div class="icon"><i class="fas fa-users"></i></div>
        <div class="counter">102</div>
        <div class="text"> Đánh Giá Tốt Từ Khách Hàng</div>
      </div>
      <div class="box">
        <div class="icon"><i class="fas fa-award"></i></div>
        <div class="counter">147</div>
        <div class="text">Giải Thưởng Đã Nhận</div>
      </div>
    </div>
  </div>
</body>
</html>

CSS

Tiếp theo chúng ta sẽ dùng các thuộc tính CSS cơ bản để giúp chức năng này trông đẹp hơn thông qua đoạn code sau đây nha:

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
   }
h1{
  margin: 30px ;
  color: #00FFFF;
}
.counter-up{
  padding: 50px;
  position: relative;
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.counter-up .content{
  z-index: 1;
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.counter-up .content .box{
  width: calc(25% - 30px);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  padding: 20px;
  box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
}
.content .box .icon{
  font-size: 48px;
  color: #00BFFF;
}
.content .box .counter{
  font-size: 50px;
  font-weight: 500;
  color: #90EE90;
}
.content .box .text{
  font-weight: 400;
  color: #00BFFF;
}
@media screen and (max-width: 1036px) {
  .counter-up{
    padding: 50px 50px 0 50px;
  }
  .counter-up .content .box{
    width: calc(50% - 30px);
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 580px) {
  .counter-up .content .box{
    width: 100%;
  }
}
@media screen and (max-width: 500px) {
  .counter-up{
    padding: 30px 20px 0 20px;
  }
}

Javascript

Phần cuối cùng mình sẽ sử dụng lệnh để gọi thư viện count up với hai thuộc tính chính là delay: thời gian trì hoãn trước khi thực hiện count up, time: thời gian thực hiện count up. Để hiểu rõ hơn bạn xem đoạn code sau đay nha:

$(document).ready(function(){
    $('.counter').counterUp({
      delay: 5,
      time: 6000
    });
});

Và kết quả bạn xem video bên dưới đây nha.

Còn dưới đây là dự án trên Codepen nha.

See the Pen tạo chức năng count up by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo thêm về cách tạo count down cho website thì truy cập ở đây nhé.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp cho bạn cách tạo chức năng count up javascript cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!