Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Javascript là gì? Tìm hiểu ngôn ngữ lập trình javascript 
Khai báo và duyệt mảng trong javascript 
Function trong Javascript - cách tạo hàm và gọi hàm trong JS 
Hàm alert() - confirm() - prompt() trong javascript 
Hàm setTimeout() và setInterval() trong Javascript 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng 
Thẻ Table trong HTML (colspan, rowspan, cellpadding và cellspacing) Hướng dẫn xây dựng đồng hồ đếm ngược với Javascript
Đồ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:
<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.
Bài viết này được đăng tại [free tuts .net]
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é:
.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:
<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
