Script đồng hồ hiển thị thời gian chạy, có thể cập nhật giờ liên tục từng giây mà không cần phải f5 Code hoàn chỉnh chèn trong html anh em lấy về tìm hiểu thêm. Nội dung HOT bị ẩn: Bạn cần đăng nhập & nhấn Thích để xem Nhúng đồng hồ đếm ngược vào web HTML Đồng hồ đếm ngược javascript Mã: <!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() { /*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); } 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>
