Tạo đồng hồ điện tử cho website bằng javascript

Tạo đồng hồ điện tử cho website bằng javascript là cách sử dụng ngôn ngữ #javascript để tạo ra đồng hồ với đầy đủ thứ, ngày, tháng, năm, giờ, phút và giây chạy theo thời gian thực như đồng hồ số các bạn thường đeo tay.

Tiến hành code

Để tạo được đồng hồ điện tử bằng javascript cho #website các bạn thực hiện như các bước sau:

Bước 1: Chèn #code javascript bên dưới vào trong thẻ #head
- Bạn có thể thay đổi các vị trí như: Thứ, ngày, tháng, năm, giờ, phút và giây theo ý muốn của mình

window.setTimeout("sho_clo_time()", 1000);
function get_vn_time(){
    var time = new Date();
    var dow = time.getDay();
    if(dow==0)
        dow = "Chủ nhật";
    else if (dow==1)
        dow = "Thứ hai";
    else if (dow==2)
        dow = "Thứ ba";
    else if (dow==3)
        dow = "Thứ tư";
    else if (dow==4)
        dow = "Thứ năm";
    else if (dow==5)
        dow = "Thứ sáu";
    else if (dow==6)
        dow = "Thứ bảy";  
    var day = time.getDate();
    var month = time.getMonth()+1;
    var year = time.getFullYear();
    var hr = time.getHours();
    var min = time.getMinutes();
    var sec = time.getSeconds();
    day = ((day < 10) ? "0" : "") + day;
    month = ((month < 10) ? "0" : "") + month;
    hr = ((hr < 10) ? "0" : "") + hr;
    min = ((min < 10) ? "0" : "") + min;
    sec = ((sec < 10) ? "0" : "") + sec;
    return dow + " " + day + "/" + month + "/" + year + " " + hr + ":" + min + ":" + sec;
}
function sho_clo_time(){
    var clo_vn_time = document.getElementById("clo_vn_time");
    if (clo_vn_time != null)
        clo_vn_time.innerHTML = getTime();
    setTimeout("sho_clo_time()", 1000);
}

Bước 2: Chèn CSS
- Để đồng hồ hiển thị đẹp hơn, bát mắt hơn bạn cần chèn đoạn #code bên dưới vào trong thẻ head

#clo_vn_time{
    font-weight:bold;
    text-align:center;
    font-size:20px;
    padding:10px;
    color:#382ff8;
    box-shadow:inset 0 0 1px rgba(0,0,0,.08), 0 0 5px rgba(255, 165, 0, 0.5);
}

Bước 3: Chèn code HTML
- Để hiển thị đồng hồ lên trang web bạn chèn đoạn code #html bên dưới vào nơi mà bạn muốn hiển thị đồng hồ trên trang #web của minh

<span id="clo_vn_time"></span>

Kết quả đạt được

Sau khi bạn thực hiện đúng như các bước bên trên bạn sẽ được kết quả như bên dưới

Chúc các bạn thành công và vui vẻ!