Trong bài viết này Web chuẩn seo sẽ hướng dẫn bạn code đếm ngược thời gian html. Sử dụng thư viện jQuery countdown để tạo đồng hồ đêm ngược. Việc sử dụng thư viện giúp cho đồng hồ đếm ngược chạy ổn định hơn. Thường trong các theme hay plugin của WordPress đều dùng thư viện thau vì code thuần vì sự ổn định của nó. Sau đây mình sẽ hướng dẫn bạn code đếm ngược thời gian html. Bài viết này nằm trong chuyên mục WordPress Development

Code đếm ngược thời gian html

Đầu tiên bạn cần tải thư viện jQuery countdown từ github về. Bạn bấm vào nút “Code” -> “Download Zip” để tải file zip về. Sau đó bạn giải nén file zip đó ra trong thư mục “dist” bạn copy file “jquery.countdown.min.js” vào thư mục trong theme hay plugin bạn muốn.

Cách add thư viện jQuery countdown vào trong plugin bạn dùng code sau:

wp_enqueue_script( 'time-countdown', plugin_dir_url( __FILE__ ). 'tên-thư-mục/jquery.countdown.min.js', array( 'jquery' ), false, true );

Cách add thư viện jQuery countdown vào trong theme bạn dùng code sau:

wp_enqueue_script( 'time-countdown', get_template_directory_uri().'tên-thư-mục/jquery.countdown.min.js' , array( 'jquery' ), false, true );

Sau khi thêm thư viện đồng hồ đếm ngược vào theme. plugin. Tiếp theo bạn cần code đếm ngược thời gian html.

Bạn có thể thay đổi thời gian để hiển thị đồng hồ đếm ngược theo ý muốn của mình. Bạn thêm code php, html như sau:

<?php
//ngày giờ bạn muốn đồng hò đếm ngược tới
$date_data = '2021-12-26 06:00';
?>
<!-- Code html chứa dồng hồ đếm ngược  -->
<div class="chuanseoweb-countdown-wrapper">
   <div class="chuanseoweb-countdown " data-date="<?php echo esc_attr( $date_data ) ?>" ></div>
/div>

Code js để sinh ra code đếm ngược thời gian html. Bạn thêm đoạn code js sau:

$('.chuanseoweb-countdown').each(function(){

//Label tên chữ ngày giờ phút bạn muốn hiển thị
var text_day = 'Ngày';
var text_hour = 'Giờ';
var text_minute = 'Phút';
var text_second = 'Giây';

//lấy dữ liệu thời gian từ file html
var data_date = $(this).data('date');

//hiển thị html dồng hồ đếm ngược bằng thư viện jQuery Countdown
$(this).countdown(data_date, function(event) {
var $this = $(this).html(event.strftime(''
+ '<div class="timer-box box-day"><span>%D</span><span>'+text_day+'</span></div>'
+ '<div class="timer-box box-hour"><span>%H</span><span>'+text_hour+'</span></div>'
+ '<div class="timer-box box-minute"><span>%M</span><span>'+text_minute+'</span></div>'
+ '<div class="timer-box box-second"><span>%S</span><span>'+text_second+'</span></div>'
));
});
});

Sau khi có code html đồng hồ đếm ngược rồi. Tiếp theo bạn cần thêm chút code css để đồng hồ nhìn đẹp hơn.

.chuanseoweb-countdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.chuanseoweb-countdown .timer-box {
  margin-bottom: 5px;
}
.chuanseoweb-countdown .timer-box:not(:last-child) {
  margin-right: 50px;
}
.chuanseoweb-countdown .timer-box {
  background: #3EDBF0;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
  border-radius: 100px;
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
}
.chuanseoweb-countdown .timer-box span {
  display: block;
  width: 100%;
}
.chuanseoweb-countdown .timer-box span:nth-child(1) {
  font-size: 50px;
  color: #fff;
  font-weight: 500;
  display: block;
  line-height: 1;
  margin-bottom: 2px;
}
.chuanseoweb-countdown .timer-box span:nth-child(2) {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  margin-top: -6px;
  display: block;
}

Kết luận

Qua bài viết trên mình đã hướng dẫn bạn code đếm ngược thời gian html trong WordPress. Mình hy vọng sẽ giúp ích cho bạn, Nếu có thắc mắc gì bạn vui lòng để lại câu hỏi bên dưới nhé. Cám ơn bạn đã theo dõi bài viết.