• Điều khoản & điều kiện
  • Chính sách bảo mật
Tech News, Magazine & Review WordPress Theme 2017
  • Trang chủ
  • Chia sẻ
    • Phần mềm
  • Kinh nghiệm
    • Kinh nghiệm về Internet
    • Kinh nghiệm về Linux
    • Kinh nghiệm về Windows
    • Kinh nghiệm về Lập trình
  • Giải thích thuật ngữ
    • Thuật ngữ Internet
No Result
View All Result
Tiền Minh Vy
  • Trang chủ
  • Chia sẻ
    • Phần mềm
  • Kinh nghiệm
    • Kinh nghiệm về Internet
    • Kinh nghiệm về Linux
    • Kinh nghiệm về Windows
    • Kinh nghiệm về Lập trình
  • Giải thích thuật ngữ
    • Thuật ngữ Internet
No Result
View All Result
Tiền Minh Vy
No Result
View All Result
Home Chia sẻ

Code đồng hồ đếm ngược (countdown timer)

Chia sẻ code đồng hồ đếm ngược TMV-countdown (countdown timer)

Minh Vy Tiền by Minh Vy Tiền
05/02/2021
Reading Time: 5min read
Code đồng hồ đếm ngược (countdown timer)
Chia sẻ trên FacebookChia sẻ trên TwitterChia sẻ qua email

Chào các bạn! Cũng đã lâu lắm rồi mình chưa đăng bài nào trên website cả do nhiều việc quá, chỉ còn vài ngày nữa là đến Tết Nguyên đán Tân Sửu 2021 rồi. Do đó, để tân trang lại cho blog của mình với website của các bạn (nếu các bạn có :3) thì bài viết này mình sẽ giới thiệu và chia sẻ code đồng hồ đếm ngược (countdown timer) nhé!

Tóm tắt ẩn
Đồng hồ đếm ngược (countdown timer) là gì?
Chức năng của Đồng hồ đếm ngược (countdown timer) TMV-countdown
Hướng dẫn cài đặt và sử dụng code đồng hồ đếm ngược (countdown timer) cho website
Giải thích một số tính năng của code đồng hồ đếm ngược TMV-countdown (countdown timer)
Cơ chế làm việc của TMV-countdown
// Chỉ cho count đến dsngaydbtt (Danh sách ngày đặc biệt)?
Tóm lại
Có thể bạn sẽ thích

Đồng hồ đếm ngược (countdown timer) là gì?

Ừ thì cái tên của nó đã nói lên tất cả rồi, đồng hồ đếm ngược (hay countdown timer) là ứng dụng dùng để tính toán và hiện ra màn hình thời gian còn lại tính từ ngày hôm nay đến một ngày xác định là còn bao nhiêu ngày, giờ, phút, giây.

Một số website có sử dụng countdown timer để trang trí blog như Sharengay.com,…

Sharengay Countdown
Ví dụ về countdown timer trên blog Sharengay.com (phần viền đỏ)

Ứng dụng này được viết ở rất nhiều ngôn ngữ lập trình web khác nhau như PHP, Javascript,… Nhưng mình thấy phổ biến nhất vẫn là Javascript vì nó là ngôn ngữ lập trình giúp website của chúng ta thêm trực quan, thời gian thực.

Riêng trong bài này mình sẽ chia sẻ với bạn ứng dụng này được viết bằng Javascript thuần, bạn có thể import vào bất kỳ nơi đâu của website (nhưng tốt nhất là đặt ở cuối nhé!). Và hãy để lại nguồn từ website của mình trong mã nguồn nhé, cám ơn bạn rất nhiều ^_^

Chức năng của Đồng hồ đếm ngược (countdown timer) TMV-countdown

Đối với TMV-countdown, chương trình này có thể:

  • Tính toán thời gian còn lại (countdown) chính xác
  • Thực thi với tốc độ rất cao do dùng 100% Javascript thuần
  • Thêm, xoá, chỉnh sửa chi tiết ngày lễ của năm (định dạng MM-DD)
  • Thêm, xoá, chỉnh sửa chi tiết mô tả về ngày lễ đã thêm (ví dụ 03/02 là ngày thành lập Đảng Cộng sản Việt Nam)
  • Đặc biệt, nếu một số ngày lễ thay đổi liên tục qua từng năm thì chương trình sẽ ưu tiên tính toán ngày lễ đó mà tắt ngày lễ đã khai báo mặc định.
  • Code trực quan, dễ chỉnh sửa, dễ bảo trì, có comment từng vị trí để giải thích tác dụng của code
  • Tự do chỉnh sửa code nhưng cần ghi nguồn tác giả (là mình đấy :v) theo giấy phép GNU v3

Hướng dẫn cài đặt và sử dụng code đồng hồ đếm ngược (countdown timer) cho website

Để có thể cài đặt và sử dụng code countdown timer cho website, bạn tải về 1 trong 2 file sau:

FILE 1 – CÓ COMMENT

FILE 2 – KHÔNG CÓ COMMENT

Sau đó, bạn mở file đã tải về bằng Notepad hoặc bất kỳ trình chỉnh sửa văn bản (text editor hoặc code editor nào) rồi copy toàn bộ nội dung trong đó.

Tiếp tục, bạn paste đoạn code đó tại bất kỳ vị trí nào của website mà bạn mong muốn là xong rồi đó! Ví dụ WordPress sẽ có mục Widget, bạn paste đoạn code đó vào mục HTML tuỳ chỉnh (Custom HTML) rồi nhấn Finish (nhớ xoá cache nếu website của bạn dùng plugin cache nhé).

Bạn mở website lên, sau đó bạn thấy tương tự như hình bên dưới là đã thành công rồi đó:

Đồng hồ đếm ngược (countdown timer) trên website tienminhvy.com
Đồng hồ đếm ngược (countdown timer) trên website tienminhvy.com

Bạn có thể tuỳ biến thêm CSS vào để trang trí phần thẻ h3 và thẻ p đấy nhé!

Giải thích một số tính năng của code đồng hồ đếm ngược TMV-countdown (countdown timer)

Cơ chế làm việc của TMV-countdown

Đầu tiên, code sẽ lấy giá trị của mảng dsngaytt (lưu trữ danh sách ngày theo định dạng MM-DD) và dsngay_mota, sau đó tự động thêm năm hiện tại đang thực thi đoạn code này (ví dụ như năm nay – 2021) vào từng ngày của danh sách và lưu vào biến dsngay.

Sau đó, code sẽ kiểm tra ngày hiện tại với ngày của danh sách. Nếu ngày hiện tại trùng với ngày đã được khai báo trong danh sách thì thông báo hiện tại là ngày lễ. Nếu không thì code sẽ dò từng ngày trong danh sách, xem ngày nào trừ cho ngày hiện tại lớn hơn 0 (danh sách ngày sắp xếp theo trật tự từ đầu đến cuối năm) thì bắt đầu đếm ngược khi nào sẽ đến ngày đó, chỉ đơn giản vậy thôi :v

// Chỉ cho count đến dsngaydbtt (Danh sách ngày đặc biệt)?

Code đồng hồ đếm ngược (countdown timer)
Code đồng hồ đếm ngược (countdown timer)

Tại đây, mặc định mình có thêm một số ngày lễ để cho code tự đếm ngược, tuy nhiên, nếu bạn muốn thêm một số ngày lễ không cố định (ví dụ như mồng 1 Tết Nguyên đán, giỗ tổ mồng 10-3 ở lịch dương) thì sao? Đơn giản là bạn chỉ cần thêm, chỉnh sửa dsngaydbtt và dsngaydb_mota, sau đó cho biến specialOnly = true là xong, còn nếu bạn không muốn sử dụng nó thì cho biến specialOnly = false thôi.

Ngoài ra, toàn bộ chức năng của từng phần trong code mình đã giải thích trong file 1 (có chứa comment) hết rồi đó. Nếu bạn muốn chỉnh sửa nâng cao thì cứ mở file đó ra rồi bắt đầu chỉnh lại theo ý muốn :3

Tóm lại

Qua bài viết này, mình đã chia sẻ code đồng hồ đếm ngược TMV-countdown (countdown timer) cũng như hướng dẫn cách cài đặt chi tiết cho website rồi đó. Nếu bạn có thắc mắc hay cần trợ giúp, đừng ngần ngại mà hãy đăng bình luận trực tiếp ở phía dưới nhé!

Cám ơn bạn đã đọc bài viết ^_^

5 1 bình chọn
Đánh giá bài viết

Có thể bạn sẽ thích

Tags: chia sẻcodecountdown timerjavascriptlập trình
Minh Vy Tiền

Minh Vy Tiền

Chào bạn, tôi là một người có nhiều kinh nghiệm với WordPress, là một lập trình viên website, tập trung nhiều với PHP. Ngoài ra tôi cũng có nhận các dự án lập trình freelance. Nếu bạn có nhu cầu vui lòng liên hệ qua Email: [email protected]

Đăng ký
Thông báo cho tôi về
guest
guest
0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận

Hosting giá rẻ HostingTocDo

Giá chỉ từ 20,000đ/tháng, nhận hỗ trợ kỹ thuật và chuyển dữ liệu từ hosting cũ sang HostingTocDo miễn phí

Hỗ trợ Litespeed, Imunify360, jetBackup

Hỗ trợ Python, Node.js từ gói WH-02 trở lên.

Đăng ký tại đây

Cùng tham gia nhóm FB để học hỏi :3

Về tôi

Tôi là một người có nhiều kinh nghiệm với WordPress, là một lập trình viên website, tập trung nhiều với PHP.

Ngoài ra tôi cũng có nhận các dự án lập trình freelance. Nếu bạn có nhu cầu vui lòng liên hệ qua Email: [email protected]

Chuyên mục

Bảo mật Bảo mật Bảo mật Chia sẻ Dịch bài Linux Dịch thuật Featured Game Giveaway Giải thích thuật ngữ Hosting Học tập Internet Internet Kinh nghiệm Kinh nghiệm về Internet Kinh nghiệm về Linux Kinh nghiệm về Lập trình Kinh nghiệm về Windows Linux Lập trình Miễn phí Miễn phí Mã nguồn Mã nguồn mở Phần mềm Phần mềm Sửa lỗi Thuật ngữ Internet Thủ thuật Tin tức công nghệ Uncategorized Web Windows Windows Wordpress

DMCA Protected

DMCA.com Protection Status

Bình luận mới nhất

  • tuấn trong Chia sẻ 2000 Preset Lightroom miễn phí
  • MuLD trong Chia sẻ hơn 300 hiệu ứng âm thanh miễn phí
  • dunguyen trong Chia sẻ 2000 Preset Lightroom miễn phí
  • Tiền Minh Vy trong Bản quyền Sketch Drawer Pro miễn phí
  • Hoai trong Bản quyền Sketch Drawer Pro miễn phí

Bạn bè \ Hữu ích \ Tài trợ

Linux Team Việt Nam

Mua theme WordPress gia re

Hosting miễn phí HostingTocDo

Công cụ hữu ích – All In One (AIO)

  • Điều khoản & điều kiện
  • Chính sách bảo mật

Bản quyền © 2019 - 2020 bởi tienminhvy.com, bảo lưu mọi quyền

No Result
View All Result
  • Trang chủ
  • Chia sẻ
    • Phần mềm
  • Kinh nghiệm
    • Kinh nghiệm về Internet
    • Kinh nghiệm về Linux
    • Kinh nghiệm về Windows
    • Kinh nghiệm về Lập trình
  • Giải thích thuật ngữ
    • Thuật ngữ Internet

Bản quyền © 2019 - 2020 bởi tienminhvy.com, bảo lưu mọi quyền

wpDiscuz