Bộ đếm HTML – html cho bộ đếm vòng lặp

Bộ đếm HTML với hướng dẫn html, thẻ, liên kết, img, div, entity, textarea, marquee, thẻ p, thẻ tiêu đề, h1, h2, bảng, định dạng, thuộc tính, phần tử, ol, ul, Loại đầu vào, v.v.
< br> Bạn đang xem: html cho vòng lặp bộ đếm

tiếp theo →
← trước

Bộ đếm HTML

Trên hầu hết các trang web, bạn đã thấy phần bộ đếm. Nó cho người dùng biết công việc kinh doanh đang diễn ra tốt như thế nào. Phần này chứa số lượng sở thích, lượt truy cập, lượt thích và nhiều thứ khác và hiển thị cho khách truy cập. Bộ đếm này tăng lên khi sự quan tâm và lượt truy cập của người dùng tăng lên.

Hầu hết, phần bộ đếm này được thêm vào cuối trang web (ở chân trang). Nó chứa các thông tin chi tiết về sự phát triển của trang web mà doanh nghiệp của bạn đang phát triển tốt hay xấu như thế nào. Bộ đếm này tăng lên khi tốc độ phát triển của doanh nghiệp tăng lên. Bạn đã nhìn thấy bộ đếm HTML như được hiển thị bên dưới ở chân trang web hầu hết thời gian.

Bộ đếm HTML

Sử dụng HTML , bạn có thể tạo giao diện người dùng cho bộ đếm này và sử dụng JavaScript để tìm nạp động và đếm số lượng khách truy cập trong thời gian thực. Chúng tôi sẽ dự đoán dữ liệu trang web thay mặt cho người dùng và khách truy cập.

Trong chương này, chúng tôi sẽ chia quá trình tạo bộ đếm thành hai phần. Trong phần đầu tiên, chúng ta sẽ làm việc về thiết kế bộ đếm đơn giản và trong phần khác, chúng ta sẽ làm việc về thiết kế CSS của bộ đếm. Bạn sẽ thấy các ví dụ khác nhau trong chương này.

Các bước tạo bộ đếm HTML

Ở đây, chúng tôi có một số bước để tạo bộ đếm tĩnh bằng HTML và CSS . Thực hiện theo các bước dưới đây:

Bước 1: Tạo cấu trúc đơn giản bằng HTML & lt; div & gt; thẻ s.

Bước 2: Thêm CSS để làm cho quầy thu hút hơn.

Bước 3: Để thêm các biểu tượng nhỏ (như vali, tách cà phê, Smylie, biểu tượng người dùng, sách và hơn thế nữa) vào quầy, hãy sử dụng liên kết bootstrap cdn và mã < / strong>.

Bước 4: Đối với mã bootstrap cdn, hãy nhấp vào liên kết sau https://www.bootstrapcdn.com/fontawesome/ < / span> và lấy mã Font Awesome từ đây.

Bộ đếm HTML

Bước 5: Sao chép liên kết CSS Font Awesome này từ đây và dán vào bên trong tab & lt; link & gt; trong thông số href. Thêm phần này vào bên trong & lt; head & gt; bằng mã HTML .

Ví dụ –

Bước 5: Ngoài điều này, bạn cũng cần thêm một mã nữa bên trong & lt; body & gt; để thêm biểu tượng với bộ đếm cụ thể.

Bước 6: Bây giờ, để tải các biểu tượng khác nhau, hãy chuyển đến biểu tượng phông chữ tuyệt vời ( https: // fontawesome.com/v4.7.0/icons/ ). Tại đây, bạn sẽ nhận được hàng nghìn biểu tượng trong đó chọn một trong những biểu tượng bạn muốn thêm và lấy mã cho chúng.

Xem Thêm  Từ điển Python - khi nào sử dụng từ điển trong python

Ví dụ: chúng tôi sẽ thêm một nút vali. Tìm kiếm biểu tượng chiếc vali trong các biểu tượng trên thanh tìm kiếm và lấy mã.

Bộ đếm HTML

Bước 7: Sao chép mã từ đây và dán vào nơi bạn muốn thêm biểu tượng này. Bạn có thể xóa mã không cần thiết khỏi nó.

Bộ đếm HTML

Bạn cũng có thể viết mã này chỉ như được cung cấp bên dưới.

Sao chép mã biểu tượng vali:

Bây giờ, hãy xem mã HTML và CSS bên dưới để thêm và thiết kế phần bộ đếm.

Tạo cấu trúc của bộ đếm

Ở đây, chúng tôi sẽ sử dụng mã HTML để tạo thiết kế bộ đếm đơn giản được chia thành bốn phần để hiển thị bốn thống kê khác nhau của trang web. Đối với ví dụ này, chúng tôi sẽ sử dụng các biểu tượng fontawesome để đại diện cho các chức năng khác nhau.

Thêm liên kết sau vào mã của bạn để tạo kiểu cho các biểu tượng và phông chữ tuyệt vời.

Liên kết CDN cho phông chữ và biểu tượng tuyệt vời:

Ví dụ

Đây là một ví dụ đơn giản về bộ đếm tĩnh sử dụng thiết kế HTML đơn giản. Trong ví dụ này, giá trị của bộ đếm do nhà phát triển web đặt, vì vậy nó sẽ không thay đổi. Chỉ có thể thay đổi các giá trị này từ mã HTML.

Ví dụ về mã HTML

Kiểm tra ngay bây giờ

Đầu ra

Thực thi mã và thêm bộ đếm ở cuối trang web. Nó sẽ hiển thị một bộ đếm đơn giản với biểu tượng của chúng, như được hiển thị trong đầu ra bên dưới:

Bộ đếm HTML

Ví dụ về mã CSS

Bây giờ, chúng ta sẽ tạo CSS để sử dụng với đoạn mã trên để tạo kiểu cho phần bộ đếm. Mã này sẽ giúp thiết kế cấu trúc quầy thu hút hơn bằng cách cung cấp kiểu dáng.

Hoàn thành phần Mã cho Bộ đếm bằng CSS

Kết hợp cả mã HTML và CSS và tạo mã hoàn chỉnh cho phần bộ đếm. Xem kết quả về cách mã HTML sẽ hoạt động sau khi thêm kiểu CSS vào đó.

Sao chép mã

Kiểm tra ngay bây giờ

Đầu ra

Khi bạn lưu và thực thi mã này trên trình duyệt web, bạn sẽ nhận được bộ đếm được thêm vào trang web. Xem ảnh chụp màn hình cho phản hồi mã trên trên Google Chrome:

Bộ đếm HTML

Chúng tôi đã sử dụng hiệu ứng di chuột trên các hộp bộ đếm này. Vì vậy, khi bạn di chuột qua bất kỳ hộp bộ đếm nào trong số này, màu của hộp tương ứng đó sẽ thay đổi với hiệu ứng chuyển tiếp. Tự mình xem hiệu ứng.

Bộ đếm HTML

Lưu ý: Thay đổi kích thước của màn hình và xem kết quả đầu ra cho các kích thước màn hình khác nhau.

Ví dụ 2: HTML đối chiếu

Đây là một ví dụ khác về bộ đếm HTML. Bây giờ chúng ta sẽ tạo một bộ đếm HTML có bộ đếm sẽ hoạt động cho đến số lượng do nhà phát triển thiết lập. Tuy nhiên, nó không phải là một bộ đếm động.

Xem Thêm  Thẻ H1 là gì? Các phương pháp hay nhất về SEO - cách sử dụng thẻ h1 trong html

Trong ví dụ này, chúng tôi cũng sẽ cung cấp màu nền và tạo bốn biến bộ đếm bằng HTML và CSS, được hiển thị theo chiều dọc.

Hoàn thành mã

Xem mã hoàn chỉnh của HTML counterUP bên dưới:

Sao chép mã

Kiểm tra ngay bây giờ

Đầu ra

Thực thi đoạn mã trên và nhận được phản hồi như được hiển thị trong ảnh chụp màn hình bên dưới:

Bộ đếm HTML

Bất cứ khi nào bạn chạy hoặc làm mới trang, số bộ đếm này sẽ tăng lên cho đến khi số đặt mã cho nhà phát triển.

Các bước được giải thích cho mã trên

Ở đây, chúng tôi có một số bước để tạo một bản sao lưu HTML bằng HTML, CSS và thêm một vài liên kết mã jquery. Thực hiện theo các bước dưới đây:

Bước 1: Tạo cấu trúc đơn giản bằng HTML & lt; div & gt; các thẻ với lớp để tạo kiểu.

Bước 2: Thêm CSS để làm cho quầy thu hút hơn.

Bước 3: Để thêm các biểu tượng nhỏ (như vali, tách cà phê, Smylie, biểu tượng người dùng, sách và hơn thế nữa) vào quầy, hãy sử dụng liên kết bootstrap cdn và mã < / strong>.

Bước 4: Đối với mã bootstrap cdn, hãy nhấp vào liên kết sau https://www.bootstrapcdn.com/fontawesome/ < / span> và lấy mã Font Awesome từ đây.

Bộ đếm HTML

Bước 5: Sao chép liên kết CSS Font Awesome này từ đây và dán vào bên trong liên kết & lt; & gt; tab trong tham số href. Thêm cái này vào bên trong & lt; head & gt; bằng mã HTML.

Ví dụ –

Bước 5: Ngoài điều này, bạn cũng cần thêm một mã nữa bên trong & lt; body & gt; để thêm biểu tượng với bộ đếm cụ thể.

Bước 6: Bây giờ, để tải các biểu tượng khác nhau, hãy chuyển đến biểu tượng phông chữ tuyệt vời ( https: // fontawesome.com/v4.7.0/icons/ ). Tại đây, bạn sẽ nhận được hàng nghìn biểu tượng trong đó chọn một trong những biểu tượng bạn muốn thêm và lấy mã cho chúng.

Ví dụ: chúng tôi sẽ thêm một nút vali. Tìm kiếm biểu tượng chiếc vali trong các biểu tượng trên thanh tìm kiếm và lấy mã.

Bộ đếm HTML

Bước 7: Sao chép mã từ đây và dán vào nơi bạn muốn thêm biểu tượng này. Bạn có thể xóa mã không cần thiết khỏi nó.

Bộ đếm HTML

Bạn cũng có thể viết mã này chỉ như được cung cấp bên dưới.

Sao chép mã biểu tượng vali:

Bây giờ, đã đến lúc thêm một vài liên kết tập lệnh vào mã HTML để tạo bộ đếm.

Thêm liên kết jquery vào mã HTML

Bước 8: Nhấp vào đây ( https://code.jquery.com/) để lấy mã. Tại đây, hãy nhấp vào thu nhỏ trong JQuery 1.x như được hiển thị trong ảnh chụp màn hình bên dưới:

Bộ đếm HTML

Bạn sẽ nhận được mã từ đây. Vui lòng sao chép mã dưới đây từ đây và dán vào mã HTML bên trong & lt; head & gt; thẻ.

Xem Thêm  Cách đặt màu nền bằng HTML và CSS - đặt html màu nền

Bước 9: Bây giờ, nhấp vào đây (https://github.com/bfintal/Counter-Up) và mở counter-up.js trên github và tải xuống tệp zip từ đây.

Bộ đếm HTML

Bước 10: Giải nén tệp zip và sao chép tệp JavaScript query.counterup.min.js từ thư mục được giải nén và dán vào thư mục chứa tệp HTML của bạn được lưu trữ.

Bộ đếm HTML

Bước 11: Trên cùng một trang github, cuộn trang xuống. Bạn sẽ nhận được hai dòng mã tập lệnh trong phần Sử dụng / Bao gồm .

Bộ đếm HTML

Sao chép và dán mã này bên trong & lt; body & gt; trong mã HTML của bạn.

Sao chép mã

Bước 12: Cuối cùng, hãy sao chép mã jQuery sau và dán ngay bên dưới mã của bước trên.

Sao chép mã

Lưu ý: Để sao lưu các số, hãy thêm một lớp với số đó. Ví dụ – & lt; h4 class = “counter” & gt; 150 & lt; / h4 & gt;

Chủ đề tiếp theo

Bài kiểm tra Excel Trung cấp

← trước
tiếp theo →


Xem thêm những thông tin liên quan đến chủ đề html cho bộ đếm vòng lặp

Reactjs Cho người mới bắt đầu | chuyển giao diện HTML sang React JS

alt

  • Tác giả: HpSEOer
  • Ngày đăng: 2021-10-09
  • Đánh giá: 4 ⭐ ( 3485 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HocReactJS HTMLtoReact huyphatit

    Reactjs Cho người mới bắt đầu | chuyển giao diện HTML sang React JS

5 Loại Vòng lặp trong JavaScript

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 3 ⭐ ( 3676 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này các bạn sẽ học được viết chương trình để lặp lại một hành động cụ thể bằng Vòng lặp trong JavaScript. 5 Loại vòng lặp và JS cung cấp

Vòng lặp for – Học PHP

  • Tác giả: hocphp.net
  • Đánh giá: 4 ⭐ ( 4513 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vòng lặp for được sử dụng khi người dùng đã xác định được trước rằng khối lệnh này sẽ được thực hiện bao nhiêu lần.

Điều khiển vòng lặp trong JavaScript

  • Tác giả: quantrimang.com
  • Đánh giá: 5 ⭐ ( 2323 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript cung cấp sự điều khiển cao để xử lý các lệnh vòng lặp và lệnh switch. Có thể có một tình huống khi bạn cần thoát khỏi vòng lặp mà không phải đi tới điểm cuối của nó. Cũng có thể có tình huống khi bạn muốn nhảy qua một phần của khối code và bắt đầu vòng lặp tiếp theo.

PHP for

  • Tác giả: gokisoft.com
  • Đánh giá: 5 ⭐ ( 5690 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vòng lặp for – lặp với số lần xác định.PHP forCú phápfor (khai báo bộ đếm; điều kiện; tăng bộ đếm) {
    code được thực thi;
    }Các tham số trong for():Khai báo bộ đếm: Khởi tạo giá trị […]

5 Loại Vòng lặp trong JavaScript

  • Tác giả: final-blade.com
  • Đánh giá: 4 ⭐ ( 2475 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bài 5: Vòng lặp trong Javascript

  • Tác giả: phambinh.net
  • Đánh giá: 4 ⭐ ( 7783 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình