Hướng dẫn xây dựng đồng hồ đếm ngược với Javascript

Đăng bởi: phungminhduong - Vào ngày: - View: 4408

DEMO

Đồng hồ đếm ngược là một ứng dụng quá quen thuộc với chúng ta rồi nên có lẽ cũng không cần phải giải thích gì nhiều nữa, một số ứng dụng của nó mà ta thường hay gặp trên các website có thể kể đến như đếm ngược thời gian khuyến mại, đến ngược thời gian của một sự kiện nào đó...

Hôm nay mình sẽ cùng các bạn xây dựng một đồng hồ đếm ngược đơn giản với Javascript nhé! 

1. Xây dựng giao diện

Đầu tiên là chúng ta sẽ xây dựng các thành phần của trang, các bạn tạo file index.html và đặt đoạn mã HTML dưới đây vào trong thẻ body:

Code 
<div class="container">
  <h2>Freetuts.net hướng dẫn tạo Toggle ẩn/hiện nội dung</h2>
  
  <p id="demo"></p>
</div>

Chúng ta chỉ cần tạo một thẻ p để chứa phần hiển thị thời gian.

Tiếp đến mình sử dụng CSS để định dạng cho các thành phần dễ nhìn hơn, các bạn thêm đoạn mã CSS dưới đây vào bên trong thẻ style nhé:

Code RUN 
.container {
  width: 500px;
  margin: auto;
  text-align: center;
}
p {
  font-size: 50px;
}

Cũng rất đơn giản thôi, chỉ là để nó dễ nhìn hơn, các bạn có thể tùy chỉnh theo ý mình ở phần này.

2. Xử lí với Javscript

Khi đã có phần giao diện, chúng ta đến bước cuối cùng đó là sử dụng Javascript để xử lí, các bạn đoạn script dưới đây vào sau thẻ body:

Code RUN 
<script>
  // Thiết lập thời gian đích mà ta sẽ đếm
  var countDownDate = new Date("Jan 5, 2018 15:37:25").getTime();

  // cập nhập thời gian sau mỗi 1 giây
  var x = setInterval(function() {

    // Lấy thời gian hiện tại
    var now = new Date().getTime();

    // Lấy số thời gian chênh lệch
    var distance = countDownDate - now;

    // Tính toán số ngày, giờ, phút, giây từ thời gian chênh lệch
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // HIển thị chuỗi thời gian trong thẻ p
    document.getElementById("demo").innerHTML = days + "Ngày " + hours + "Giờ "
    + minutes + "Phút " + seconds + "Giây ";

    // Nếu thời gian kết thúc, hiển thị chuỗi thông báo
    if (distance < 0) {
      clearInterval(x);
      document.getElementById("demo").innerHTML = "Thời gian đếm ngược đã kết thúc";
    }
  }, 1000);
</script>

Vậy là xong rồi, giờ các bạn chạy file index.html để xem kết quả nhé!

3. Lời kết

Qua bài viết này, mình đã hướng dẫn các bạn tạo một đồng hồ đếm ngược đơn giản, hi vọng nó sẽ giúp các bạn có thêm sự lựa chọn khi xây dựng website. Nếu có bất cứ thắc mắc gì các bạn hãy để lại ở phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net

Tham khảo: w3schools.com

Khóa học nên xem

Nguồn: freetuts.net