Giảm truy cập css

Trong bài viết này, chúng ta sẽ thảo luận về cách xây dựng bộ đếm tăng và giảm khi nhấp vào nút. Nếu bạn đang xem xét chỉ thực hiện chức năng tăng, thì có thể bỏ qua mã giảm

Nội dung chính Hiển thị

• 1. Create
  for all the HTML elements
• 2. Thêm các nút hình ảnh HTML
• 3. Khởi tạo đếm thành 0 khi tải trang
• 4. Hàm JS cho chức năng Gia tăng
• 5. Hàm JS cho chức năng Giảm
• 6. Thêm sự kiện “nhấp chuột” vào các nút
• Điều gì có thể được sử dụng để tăng giá trị của số đếm lên 1 trong trình xử lý sự kiện nhấp vào nút?
• Làm cách nào để tăng giá trị của một biến trong JavaScript?
• Nếu bạn muốn tăng số nút đếm thì mã là gì?
• Làm thế nào để bạn đếm các sự kiện onclick?

Chúng tôi sẽ tạo một bộ đếm với các chức năng sau

1. Khởi tạo đếm thành 0 khi tải trang
2. Số lượng tăng thêm 1 khi nhấp vào nút
3. Số lần giảm đi 1 khi nhấp vào nút

Bộ đếm tăng và giảm

1. Create for all the HTML elements

Đầu tiên, chúng ta cần thẻ div HTML cho các phần tử sau

1. Nút tăng. Vùng chứa HTML cho nút tăng với id “số lần tăng
2. Tổng số. Vùng chứa HTML nơi tổng số văn bản được hiển thị
3. nút giảm. Bộ chứa HTML cho nút giảm dần với id “số lần giảm

2. Thêm các nút hình ảnh HTML

Tiếp theo, chúng ta sẽ thêm hai nút cho cả tăng và giảm như sau

1. Nút hình ảnh có id là “up-arrow” và up_arrow. url hình ảnh png làm nguồn
2. Nút hình ảnh có id là “down-arrow” và up_arrow. url hình ảnh png làm nguồn

3. Khởi tạo đếm thành 0 khi tải trang

Số lượng cần được hiển thị là 0 khi trang được tải lần đầu tiên, điều này được thực hiện theo các bước sau

1. Truy cập vùng chứa HTML với id “total-count” bằng cách sử dụng bộ chọn DOM
2. Khai báo và khởi tạo biến đếm JS bằng 0
3. Gán giá trị biến đếm cho phần tử DOM đã chọn trước đó bên trongHTML

// Select total count
const totalCount = document.getElementById("total-count");

// Variable to track count
var count = 0;

// Display initial count value
totalCount.innerHTML = count;

4. Hàm JS cho chức năng Gia tăng

Hàm JS để xử lý số lượng tăng theo các bước sau

1. Tăng giá trị biến đếm lên 1
2. Gán giá trị biến đếm cho phần tử TotalCount DOM

// Function to increment count
const handleIncrement = () => {
  count++;
  totalCount.innerHTML = count;
};

5. Hàm JS cho chức năng Giảm

Hàm JS để xử lý giảm số đếm bằng các bước sau

1. Giảm giá trị biến đếm đi 1
2. Gán giá trị biến đếm cho phần tử TotalCount DOM

// Function to decrement count
const handleDecrement = () => {
  count--;
  totalCount.innerHTML = count;
};

6. Thêm sự kiện “nhấp chuột” vào các nút

Cuối cùng, chúng tôi cần cho phép người dùng kích hoạt chức năng JavaScript, chức năng này được triển khai theo các bước sau

Tôi cần một danh sách các bài đăng trên blog được đánh số để liệt kê cuối cùng/cao nhất trước và đi xuống từ đó. Như thế này

5. Post Title
4. Post Title
3. Post Title
2. Post Title
1. Post Title

Nhưng ở trên chỉ là văn bản. Tôi muốn làm điều này với một phần tử ngữ nghĩa

  
This
  
List
  
Will Be
  
Numbered In
  
Reverse

1

cách dễ dàng

Điều này có thể được thực hiện bằng cách sử dụng thuộc tính

  
This
  
List
  
Will Be
  
Numbered In
  
Reverse

2 của HTML trên

  
This
  
List
  
Will Be
  
Numbered In
  
Reverse

1

  
This
  
List
  
Will Be
  
Numbered In
  
Reverse

Đối với hầu hết mọi người, điều này là đủ. Công việc hoàn thành.  

Nhưng tôi cần các kiểu tùy chỉnh cho quầy.  

Hãy biết rằng các kiểu số danh sách tùy chỉnh có thể được thực hiện với phần tử giả

  
This
  
List
  
Will Be
  
Numbered In
  
Reverse

4, nhưng điều đó chưa được Chrome hỗ trợ (mặc dù tôi nghe nói nó sắp ra mắt)

Vì tôi muốn các kiểu số tùy chỉnh tương thích hoàn toàn với nhiều trình duyệt, nên tôi đã sử dụng bộ đếm tùy chỉnh.  

Thêm và tạo kiểu cho bộ đếm tùy chỉnh

Việc tạo kiểu cho bộ đếm của danh sách được sắp xếp khác với phần còn lại của danh sách yêu cầu vô hiệu hóa bộ đếm mặc định, đồng thời tạo và hiển thị bộ đếm của riêng chúng tôi bằng Bộ đếm CSS. Chris đã chia sẻ một số công thức nấu ăn trước đây rất đáng để thử

Giả sử chúng ta có HTML sau

1

…trước tiên chúng ta cần tắt bộ đếm mặc định đi kèm với tất cả các danh sách được sắp xếp theo thứ tự bằng cách đặt thuộc tính CSS

  
This
  
List
  
Will Be
  
Numbered In
  
Reverse

5 thành

  
This
  
List
  
Will Be
  
Numbered In
  
Reverse

6 như vậy

4

Điều đó sẽ loại bỏ tất cả các đánh số mặc định. Tiếp theo, chúng tôi tạo một bộ đếm trong CSS để theo dõi số lượng mục trong danh sách

5

Điều này cho chúng ta một bộ đếm có tên là “a” nhưng nó có thể được gọi là gì bạn thích. Hãy hiển thị bộ đếm của chúng ta bằng cách sử dụng phần tử giả

  
This
  
List
  
Will Be
  
Numbered In
  
Reverse

7 trên mục danh sách (

  
This
  
List
  
Will Be
  
Numbered In
  
Reverse

8)

8

Điều này sẽ đặt nội dung của phần tử giả thành giá trị của bộ đếm của chúng tôi. Ngay bây giờ, điều đó sẽ in 1 bên cạnh mục danh sách của bạn

Chúng ta cần báo cho bộ đếm CSS cách tăng

9

Giá trị bắt đầu của “a” bằng 0, điều này có vẻ kỳ lạ, nhưng mức tăng mặc định là 1, nghĩa là giá trị đó trở thành điểm bắt đầu thực tế. Tăng thêm 1 chỉ là mặc định, nhưng chúng ta có thể thay đổi điều đó vì chúng ta sẽ sớm thấy

Bây giờ, chúng ta có thể tiến hành áp dụng bất kỳ kiểu tùy chỉnh nào mà chúng ta muốn cho bộ đếm, bởi vì bộ đếm chỉ là một phần tử giả văn bản được mở rộng để tạo kiểu

// Select total count
const totalCount = document.getElementById("total-count");

// Variable to track count
var count = 0;

// Display initial count value
totalCount.innerHTML = count;

0

Ví dụ: ở đây, chúng tôi đã tạo màu xanh lam cho bộ đếm và tăng kích thước phông chữ. Đây là những điều mà chúng tôi không thể thực hiện khi sử dụng bộ đếm mặc định

Đảo ngược bộ đếm tùy chỉnh

Nếu chúng tôi thêm thuộc tính

  
This
  
List
  
Will Be
  
Numbered In
  
Reverse

2 vào phần tử

  
This
  
List
  
Will Be
  
Numbered In
  
Reverse

1 như chúng tôi đã làm trước đây, chúng tôi sẽ không quan sát thấy hiệu ứng nào vì chúng tôi đã tắt đánh số mặc định. Đó chỉ là những gì tài sản này làm

// Select total count
const totalCount = document.getElementById("total-count");

// Variable to track count
var count = 0;

// Display initial count value
totalCount.innerHTML = count;

3

Mã ở trên không ảnh hưởng đến việc đánh số tùy chỉnh của chúng tôi. Có lẽ vẫn nên để nó ở đó, vì ý định của chúng tôi là đảo ngược danh sách. Điều này giữ cho mọi thứ chính xác về mặt ngữ nghĩa

Để đảo ngược thứ tự trực quan của cách đánh số dựa trên bộ đếm của chúng ta, chúng ta cần biết tổng số mục trong danh sách và hướng dẫn bộ đếm bắt đầu từ số đó rồi giảm dần từ đó

// Select total count
const totalCount = document.getElementById("total-count");

// Variable to track count
var count = 0;

// Display initial count value
totalCount.innerHTML = count;

4

Ở đây, chúng tôi đang đặt

11 thành 4. Nói cách khác, chúng tôi yêu cầu trình duyệt bắt đầu đếm từ 4 thay vì 1. Chúng tôi lại sử dụng 4 thay vì 3, vì quy tắc

12 được áp dụng cho mục đầu tiên trong danh sách, là 0. Nhưng, trong trường hợp chúng ta đếm ngược, 4 trở thành 0. Nếu chúng ta bắt đầu từ 3 và giảm dần, kết thúc ở 0 thay vì 1

Tiếp theo, chúng tôi thay đổi quy tắc

13 của mình thành giảm 1 thay vì tăng, bằng cách biến nó thành số nguyên âm