Tạo đồng hồ số cho trang web với HTML, CSS và JavaScript

Trong bài viết này, mình sẽ chia sẻ mã HTML, CSS, Javascript để hiển thị thời gian và ngày tháng trên trang web của bạn.

Trước tiên, bạn cần thêm đoạn mã CSS và Javascript dưới đây vào trang web của mình.

Mã CSS:

<style>
    .datetime-display {
        text-align: center;
        border: 3px solid burlywood;
    }

    #time {
        font-weight: 400;
        display: block;
        font-size: 30px;
        margin: 0 0 5px;
        letter-spacing: 5px;
    }
</style>

Mã Javascript:

<script type="text/javascript">
    var date = new Date();
    if (date.getTimezoneOffset() == 0)
        time = date.getTime() + (7 * 60 * 60 * 1000);
    else
        time = date.getTime();
    date.setTime(time);

    var days = new Array('Chủ nhật', 'Thứ 2', 'Thứ 3', 'Thứ 4', 'Thứ 5', 'Thứ 6', 'Thứ 7');
    day = date.getDay();
    month = date.getMonth() + 1;
    year = date.getFullYear();
    document.getElementById('day-and-date').innerText = days[day] + ', ' + (date.getDate() < 10 ? '0' : '') + date.getDate() + '/' + (month < 10 ? '0' : '') + month + '/' + year;

    var timeElement = document.getElementById('time');
    var updateTimeInterval = setInterval(function () {
        updateClock();
    }, 1000);

    function updateClock() {
        if (timeElement) {
            var newDate = new Date();
            var localeTimeString = newDate.toLocaleTimeString();
            timeElement.innerHTML = localeTimeString;
        } else {
            clearInterval(updateTimeInterval);
        }
    }
</script>

Bước cuối cùng, hãy thêm mã HTML dưới đây vào nơi mà bạn muốn nó được hiển thị.

<div class="datetime-display">
    <span id="day-and-date"></span>
    <span id="time"></span>
</div>

Chạy mã nguồn