Khái niệm
Đếm ngược trong Javascript là một chức năng sử dụng javascript để tạo ra hiệu ứng đếm ngược đến một sự kiện, một mốc thời gian cụ thể trong lập trình web.
Một vài ứng dụng phổ biến của chức năng đếm ngược trong Javascript như:
- Đếm ngược thời gian săn sale với các website bán hàng.
- Đếm ngược đến thời gian sảy ra một sự kiện, một chương trình cụ thể.
- Đếm ngược đến tết nguyên đán.
- Đếm ngược thời gian làm bài thi với các website làm bài thi online.
Các vấn đề cần lưu ý khi triển khai chức năng đếm ngược trong Javascript
Để triển khai được chức năng đếm ngược trong javascript thực sự chỉ mất vài dòng HTML CSS Và Javascript tuy nhiên trong quá trình triển khai sẽ gặp vô số vấn đề và đa phần các vấn đề này lại rất quan trọng.
Độ chính xác trong thời gian đếm ngược
Điều quan trọng bật nhất trong đếm ngược trong javascript đó chính là độ chính xác.
Nếu ko thể chính xác, chức năng này không chỉ vô nghĩa mà còn tiềm tàng khả năng mang lại những thiệt hại vô cùng lớn.
Đơn vị thời gian đa dạng phức tạp
Đơn vị thời gian bao gồm: năm, tháng, ngày, giờ, phút, giây,… Với số lượng đơn vị vô cùng đa dạng và phức tạp nếu không thể có một logic tốt thì bài toán này sẽ giải quyết một cách vô cùng dài dòng.
Ý tưởng triển khai
Trong Javascript có một hàm setInterval, hàm này được sử dụng để lặp lại liên tục một hành động theo số thời gian quy định. Ta sẽ sử dụng hàm này để lặp lại liên tục hàm đếm ngược trong Javascript.
Tiếp theo là vấn đề đơn vị, để giải quyết được vấn đề đa dạng đơn vị thời gian ta sẽ quy nó về chung một đơn vị ms để tiến hành cộng trừ hai mốc thời gian. Sau đó chuyển đơn vị ms này về đơn vị khác nhau tương ứng.
Triển khai
HTML
COMING SOON
05day12hour30minute12seconds
CSS
body{
margin:0;
min-height: 100vh;
font-family: system-ui;
color:#eee;
background-image: linear-gradient(to bottom right,#197D9F,#493F6F
);
display: flex;
justify-content: center;
align-items: center;
}
.container{
text-align: center;
}
.logo img{
width:90px
}
h1{
font-size: xxx-large;
font-weight: 100;
}
.time .item{
position: relative;
background-image:
repeating-linear-gradient(to right bottom,#7a7a7a 0px, #7a7a7a 1px,transparent 1px, transparent 8px)
;
}
.time{
display: grid;
grid-template-columns: 100px 100px 100px 100px;
column-gap: 20px;
grid-template-rows: 100px;
}
#day,
#hour,
#minute,
#seconds{
font-size: xxx-large;
font-weight: bold;
}
.time .item::before,
.time .item::after
{
position: absolute;
width:6px;
height:20px;
background-color: #212121;
content:'';
left:0;
top:50%;
transform: translate(0,-50%);
}
.time .item::after{
left: unset;
right:0;
}
Javascript
let endDate = new Date("01/01/2023 00:00:00").getTime();
let check = setInterval(function(){
let now = new Date().getTime();
let distance = endDate - now;
let day = Math.floor(distance / (24*60*60*1000));
let hour = Math.floor((distance % (24*60*60*1000)) / (60* 60*1000));
let minute = Math.floor((distance % (60* 60*1000)) / (60*1000));
let seconds = Math.floor((distance % (60*1000)) / 1000);
document.getElementById('day').innerText = day;
document.getElementById('hour').innerText = hour;
document.getElementById('minute').innerText = minute;
document.getElementById('seconds').innerText = seconds;
if(distance <= 0){
clearInterval(check);
}
}, 1000);
Mô tả đoạn code Javascript trên trong chức năng đếm ngược:
EndDate là biến dùng để ám chỉ mốc thời gian cần để đếm ngược còn now chính là thời gian hiện tại.
Sử dụng getTime() để chuyển các mốc thời gian này về đơn vị ms.
Số ngày chính bằng tổng số ms chia cho tổng số ms tương ứng với một ngày ( 1 ngày = 24 giờ * 60 phút * 60 giây * 1000ms) để lấy phần nguyên, phần còn dư sẽ dùng để chia và tính các đơn vị nhỏ hơn như giờ, phút giây.
Tương tự như trên số giờ sẽ bằng tổng số ms còn lại chia số số ms được chuyển đổi từ một giờ ( 1 giờ = 60 phút * 60 giây * 1000ms) để lấy phần nguyên, tương tự như vậy với phút và giây.
Sau đó sẽ sử dụng những con số thời gian vừa tìm được gán vào HTML thông qua các id tương ứng.
Cúi cùng kiểm tra khoảng cách thời gian của hai mốc thời gian này nếu nhỏ hơn hoặc bằng không tức là đã đến thời gian quy định, thì dùng clearInterval để dùng hàm đếm ngược này lại.