ạo đồng hồ đếm ngược với hàm setTimeout() trong JS - Bài tập Javascript
Chắc chắn bạn nào cũng từng sử dụng đồng hồ đếm ngược rồi phải không nào? Nhớ thời học cấp 3 mấy ông thầy dạy thể dục hay sử dụng để dạy môn chạy ngắn và chạy đường dài. Vậy bạn nghĩ có thể viết một chương trình hiển thị đồng hồ đếm ngược bằng Javascript không? Hoàn toàn có thể nhé các bạn, và trong ...
Chắc chắn bạn nào cũng từng sử dụng đồng hồ đếm ngược rồi phải không nào? Nhớ thời học cấp 3 mấy ông thầy dạy thể dục hay sử dụng để dạy môn chạy ngắn và chạy đường dài. Vậy bạn nghĩ có thể viết một chương trình hiển thị đồng hồ đếm ngược bằng Javascript không? Hoàn toàn có thể nhé các bạn, và trong bài này mình sẽ hướng dẫn bạn làm điều đó.
Để xây dựng đồng hồ đếm ngược bằng Javascript thì bạn phải biết một số kiến thức như sau:
- Câu lệnh if else
- DOM
- hàm setTimeout()
- Và một số phần căn bản khác
1. HTML hiển thị đồng hồ
Trước tiên bạn cần tạo một file tên là clock.html và nhập đoạn mã HTML tạo giao diện sau:
<!DOCTYPE html>
<html>
<head>
<title>Đồng hồ đếm ngược bằng JS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
span{border: solid 1px #ACACAC; padding: 2px;}
</style>
<script language="javascript">
var h = null; // Giờ
var m = null; // Phút
var s = null; // Giây
var timeout = null; // Timeout
function start()
{
// Code
}
function stop(){
clearTimeout(timeout);
}
</script>
</head>
<body>
<div>
<strong>
Nhập thông tin ban đầu: <br/>
</strong>
<input type="text" id="h_val" placeholder="Giờ" value=""/> <br/>
<input type="text" id="m_val" placeholder="Phút" value=""/> <br/>
<input type="text" id="s_val" placeholder="Giây" value=""/>
<input type="button" value="Start" onclick="start()"/>
<input type="button" value="Stop" onclick="stop()"/> <br/> <br/>
</div>
<div>
<span id="h">Giờ</span> :
<span id="m">Phút</span> :
<span id="s">Giây</span>
</div>
</body>
</html>Trong file này bạn cần chú ý tới những đoạn code sau:
Đây là đoạn code xử lý chạy đồng hồ.
<script language="javascript">
var h = null; // Giờ
var m = null; // Phút
var s = null; // Giây
var timeout = null; // Timeout
function start()
{
// Code
}
function stop(){
clearTimeout(timeout);
}
</script>Đây là đoạn code hiển thị form nhập thông tin.
<div>
<strong>
Nhập thông tin ban đầu: <br/>
</strong>
<input type="text" id="h_val" placeholder="Giờ" value=""/> <br/>
<input type="text" id="m_val" placeholder="Phút" value=""/> <br/>
<input type="text" id="s_val" placeholder="Giây" value=""/>
<input type="button" value="Start" onclick="start()"/>
<input type="button" value="Stop" onclick="stop()"/> <br/> <br/>
</div>Đây là đoạn code hiển thị đồng hồ.
<div>
<span id="h">Giờ</span> :
<span id="m">Phút</span> :
<span id="s">Giây</span>
</div>
Chúng ta sẽ dựa vào ID của các thẻ HTML để truy xuất tới các phần tử (Xem bài DOM Element).
2. Sử dụng Javascript hiển thị đồng hồ đếm ngược
Nhiệm vụ bây giờ của chúng ta là code cho hàm start() ở phần Javascrpt. Bạn bổ sung code cho hàm này nhu sau:
function start()
{
/*BƯỚC 1: LẤY GIÁ TRỊ BAN ĐẦU*/
if (h === null)
{
h = parseInt(document.getElementById('h_val').value);
m = parseInt(document.getElementById('m_val').value);
s = parseInt(document.getElementById('s_val').value);
}
/*BƯỚC 1: CHUYỂN ĐỔI DỮ LIỆU*/
// Nếu số giây = -1 tức là đã chạy ngược hết số giây, lúc này:
// - giảm số phút xuống 1 đơn vị
// - thiết lập số giây lại 59
if (s === -1){
m -= 1;
s = 59;
}
// Nếu số phút = -1 tức là đã chạy ngược hết số phút, lúc này:
// - giảm số giờ xuống 1 đơn vị
// - thiết lập số phút lại 59
if (m === -1){
h -= 1;
m = 59;
}
// Nếu số giờ = -1 tức là đã hết giờ, lúc này:
// - Dừng chương trình
if (h == -1){
clearTimeout(timeout);
alert('Hết giờ');
return false;
}
/*BƯỚC 1: HIỂN THỊ ĐỒNG HỒ*/
document.getElementById('h').innerText = h.toString();
document.getElementById('m').innerText = m.toString();
document.getElementById('s').innerText = s.toString();
/*BƯỚC 1: GIẢM PHÚT XUỐNG 1 GIÂY VÀ GỌI LẠI SAU 1 GIÂY */
timeout = setTimeout(function(){
s--;
start();
}, 1000);
}Qua các phần comment mình không giải thích gì thêm
3. Lời kết
Bài này khá thú vị và nó vận dụng khá nhiều kiến thức lập trình javascript căn bản, kết hợp với tư duy logic của bài toán để giải quyết vấn đề, Qua bài này hy vọng sẽ giúp bạn ngày càng nắm vững Javascript hơn nữa. Cuối cùng chúc bạn thành công.
