Vì tham số ist_dst được sử dụng trong ví dụ này không được dùng trong PHP 5. 1 và bị xóa trong PHP 7, sẽ không an toàn khi dựa vào mã này để cung cấp kết quả chính xác trong các phiên bản PHP hiện tại. Thay vào đó, hãy sử dụng ngày. cài đặt múi giờ hoặc hàm date_default_timezone_set[]
Nếu trang web của bạn tập trung vào một sự kiện cụ thể trong tương lai, chẳng hạn như Giáng sinh hoặc đám cưới của bạn, bạn có thể muốn có đồng hồ đếm ngược để cho người dùng biết còn bao lâu nữa cho đến khi sự kiện đó diễn ra. Bạn có thể làm điều này trong PHP bằng dấu thời gian và hàm mktime
Hàm mktime[] dùng để tạo giả tạo dấu thời gian cho một ngày và giờ đã chọn. Nó hoạt động giống như hàm time[], ngoại trừ nó dành cho một ngày cụ thể và không nhất thiết phải là ngày hôm nay
Cách mã hóa đồng hồ đếm ngược
- Đặt ngày mục tiêu. Ví dụ: sử dụng ngày 10 tháng 2 năm 2017. Làm điều đó với dòng này, theo cú pháp. mktime [giờ, phút, giây, tháng, ngày, năm. là _dst].
$target = mktime[0, 0, 0, 2, 10, 2017] ;
- Thiết lập ngày hiện tại với dòng này.
$today = time [] ;
- Để tìm sự khác biệt giữa hai ngày, chỉ cần trừ.
$difference =[$target-$today] ;
- Vì dấu thời gian được đo bằng giây, hãy chuyển đổi kết quả thành bất kỳ đơn vị nào bạn muốn. Trong giờ, chia cho 3600. Ví dụ này sử dụng số ngày chia cho 86.400—số giây trong một ngày. Để đảm bảo số là số nguyên, hãy sử dụng thẻ int.
$days =[int] [$difference/86400] ;
- Đặt tất cả lại với nhau cho mã cuối cùng.
Trích dẫn bài viết này
Sự sắp xếp
trích dẫn của bạn
Bradley, Angela. "Sử dụng PHP Mktime để tạo Đếm ngược. "ThinkCo. https. //www. suy nghĩ. com/use-mktime-to-create-countdown-2693921 [truy cập ngày 23 tháng 1 năm 2023]
Chúng tôi sẽ tạo đồng hồ đếm ngược trong PHP dựa trên một số giá trị cột DateTime từ cơ sở dữ liệu MySQL. Loại đồng hồ hẹn giờ này được sử dụng chủ yếu trong các trang đấu thầu/đấu giá nơi bạn hiển thị đồng hồ đếm ngược cho đến giá thầu cuối cùng. Bạn cũng có thể hiển thị đồng hồ đếm ngược cho các sự kiện đặc biệt như đếm ngược đến năm mới, hạn chót của dự án, v.v.
Chúng tôi sẽ sử dụng thư viện của bên thứ ba có tên là TimeCircles. Bạn có thể tải về từ đây. Nó cũng được bao gồm trong các tệp nguồn được đính kèm ở cuối hướng dẫn này
Chúng tôi sẽ sử dụng cơ sở dữ liệu mẫu có tên mô hình cổ điển, cơ sở dữ liệu này sẽ được đưa vào tệp nguồn
Bắt đầu bằng cách tải xuống thư viện jQuery và TimeCircles và sao chép các tệp sau vào dự án của bạn
- jquery-3. 3. 1. tối thiểu. js
- Tạo một thư mục có tên TimeCircles và dán các tệp sau vào đó
- vòng tròn thời gian. css
- vòng tròn thời gian. js
Bây giờ hãy thực hiện truy vấn MySql của bạn để lấy giá trị ngày giờ để hiển thị đồng hồ đếm ngược
Trong trường hợp này, chúng tôi sẽ nhận được một số thời gian đặt hàng cho đến khi hàng đến từ cơ sở dữ liệu mẫu của chúng tôi
Bây giờ, tạo một đơn giản
cung cấp cho nó một thuộc tính id duy nhất và cung cấp giá trị ngày giờ cho thuộc tính data-date. Bộ đếm ngược sẽ được hiển thị dựa trên giá trị của thuộc tính này
Bước cuối cùng là khởi tạo thời gian bằng hàm jQuery đơn giản. Gọi hàm TimeCircles[] từ đây
đối tượng khi trang được tải đầy đủ
Vậy là xong, chạy file của bạn, bạn sẽ có thể xem đồng hồ đếm ngược. Mã hoàn chỉnh của bạn sẽ trông như thế này
Thư viện thứ 2 SyoTimer
Bây giờ chúng ta cần hiển thị đồng hồ đếm ngược trong PHP bằng thư viện thứ 2 có tên là SyoTimer. Các tệp CSS và JS của nó có thể được tải xuống từ liên kết bên dưới. Chúng tôi đã tạo một thư mục nơi các tệp của nó cần được lưu. Trước tiên hãy bao gồm các tệp này trong thẻ của bạn
Sau đó, tạo div của nó, nơi chúng tôi sẽ hiển thị đồng hồ đếm ngược cho thư viện SyoTimer
Chúng tôi cần lấy giá trị dấu thời gian trong Javascript, chúng tôi đang nhận nó bằng PHP từ cơ sở dữ liệu MySQL nhưng chúng tôi cần lấy nó trong Javascript. Cách đơn giản nhất là tạo một trường nhập ẩn và sau đó lấy giá trị của nó trong Javascript bằng hàm getElementById
Sau đó, trong Javascript, trước tiên hãy lấy giá trị của nó bằng hàm getElementById. Sau đó, tạo một đối tượng Ngày sử dụng giá trị đó. Và cuối cùng hiển thị SyoTimer
var timer_value = document.getElementById["timer_value"].value;
var date = new Date[timer_value];
$['#simple_timer'].syotimer[{
year: date.getFullYear[],
month: date.getMonth[] + 1,
day: date.getDate[],
hour: date.getHours[],
minute: date.getMinutes[],
seconds: date.getSeconds[]
}];
Chạy mã và bây giờ bạn sẽ có thể thấy đồng hồ đếm ngược thứ 2 được tạo bằng thư viện SyoTimer
Thư viện thứ 3 PsgTimer
Tương tự như chúng tôi đã làm với SyoTimer, chúng tôi cần lưu các tệp CSS và JS của nó trong một thư mục riêng. Sau đó bao gồm các tệp đó trong thẻ của chúng tôi
Sau đó tạo một
thẻ nơi chúng tôi sẽ hiển thị đồng hồ đếm ngược
Và cuối cùng khởi tạo nó trong Javascript
1
Chạy mã và bây giờ bạn sẽ có thể thấy đồng hồ đếm ngược thứ 3 được tạo bằng thư viện PsgTimer
Thư viện thứ 4 ComingSoon
Bây giờ chúng ta sẽ sử dụng một thư viện khác cho đồng hồ đếm ngược có tên là ComingSoon, giống như chúng ta đã làm với các thư viện trước đó, chúng ta cần lưu các tệp CSS và JS của nó vào một thư mục riêng. Sau đó bao gồm các tệp đó trong thẻ của chúng tôi
Tạo một
nơi đồng hồ đếm ngược này sẽ được hiển thị
Và cuối cùng khởi tạo nó trong Javascript của chúng tôi
4
Đây là 4 thư viện mà chúng tôi nghĩ rằng có thể được sử dụng trong bất kỳ loại thiết kế trang web nào. Nhưng nếu bạn gặp sự cố khi tích hợp điều đó trong dự án của mình, vui lòng đăng nhận xét trong phần nhận xét bên dưới. Nếu bạn có bất kỳ đề xuất nào cho một thư viện khác, vui lòng cho tôi biết, tôi cũng sẽ cố gắng thêm nó vào hướng dẫn này