Mới đó mà đã gần nửa năm 2021 trôi qua. Tình hình dịch bệnh COVID-19 cũng chẳng mấy khả quan. Nhưng vẫn cứ hy vọng tình hình sẽ khả quan hơn trong thời gian tới và có thể sang năm mới thì tình hình được kiểm soát.
Bài viết này sẽ hướng dẫn các bạn tạo 1 bộ đếm lùi thời gian để xem còn bao lâu nữa sẽ sang năm mới.
Rất đơn giản bạn hãy sử dụng đoạn mã dưới đây:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <style> .wrapper { margin: 50px auto; text-align: center; border: 1px solid #ff0000; padding: 25px; } .dongho{ color:#ff0000; font-size:20px; } </style> <div class="wrapper"> <span id="countdown" class="dongho"></span> <script> var target_date = new Date("01, 01, 2022").getTime(); var days, hours, minutes, seconds; var countdown = document.getElementById("countdown"); setInterval(function () { var current_date = new Date().getTime(); var seconds_left = (target_date - current_date) / 1000; days = parseInt(seconds_left / 86400); seconds_left = seconds_left % 86400; hours = parseInt(seconds_left / 3600); seconds_left = seconds_left % 3600; minutes = parseInt(seconds_left / 60); seconds = parseInt(seconds_left % 60); countdown.innerHTML = "<strong>Còn " + days + " ngày - " + hours + " giờ - " + minutes + " phút - " + seconds + " giây nữa.</strong>"; }, 1000); </script> </div> |
Ở đoạn mã trên bạn có thể thay giá trị tại biến target_date thành một mốc thời gian trong tương lai là được.
Dĩ nhiên ở đây chỉ là hướng dẫn cơ bản. Để áp dụng vào thực tế bạn có thể tùy chỉnh thêm giao diện hoặc chức năng nếu muốn.
Chúc các bạn thành công.
Huỳnh Mai Anh Kiệt
- Advertisement -
