Bài này xin giới thiệu cách tạo đồng hồ đếm ngược thời gian đơn giản với javascript cho blogspot/website.
Minh họa ở đây là tới giáng sinh 2022 nhưng với code này bạn có thể thay đổi ngày tháng năm để dùng cho mỗi dịp giáng sinh trong các năm tiếp theo.
Minh họa: Đếm ngược tới Giáng Sinh 2022(25/12/2022)
Để tạo đồng hồ này đơn giản là ta tiến hành thêm 1 tiện ích và dán code sau vào rồi lưu lại
<div id="bp_count_down_div"> </div> <script language="JavaScript"> var bp_date_target = new Date("December 25, 2016 00:00:00"); var bp_date_now = new Date(); var bp_count_down_complete_message = "Chúc Giáng Sinh Vui Vẻ"; if (bp_date_now >= bp_date_target) { document.getElementById("bp_count_down_div").innerHTML = bp_count_down_complete_message; } else { bp_time_difference = Math.floor(((bp_date_target - bp_date_now).valueOf()) / 1000); display_time_difference(bp_time_difference); } function display_time_difference(bp_time_difference) { if (bp_time_difference <= 0) { document.getElementById("bp_count_down_div").innerHTML = bp_count_down_complete_message; return; } bp_count_down_message = bp_format_seconds(bp_time_difference, 86400, 100000) + " Ngày " + bp_format_seconds(bp_time_difference, 3600, 24) + " Giờ " + bp_format_seconds(bp_time_difference, 60, 60) + " Phút " + bp_format_seconds(bp_time_difference, 1, 60) + " Giây là tới Giáng Sinh"; document.getElementById("bp_count_down_div").innerHTML = bp_count_down_message; setTimeout("display_time_difference(" + (bp_time_difference - 1) + ")", 1000); } function bp_format_seconds(secs, num1, num2) { num = ((Math.floor(secs / num1)) % num2).toString(); if (num.length < 2) s = "0" + num; return "" + num + ""; } </script>
Lưu ý
Trong phần chữ màu đỏ có:
- December là tháng
- 25 là ngày
- 2016 là năm
Tới ngày đó là giáng sinh vì vậy bạn có thể thay đổi các thông số này cho phù hợp với từng năm tiếp theo.
