Đồng hồ số Javascript - DevForum



DevForum chia sẻ các bạn code làm Đồng hồ số nhảy dạng lật lịch bằng Javascript

1. HTML

<div class="container">
        <div class="clock">
            <div><p class="hours">00</p><p>Hours</p></div>
            <div><p class="minutes">00</p><p>Minutes</p></div>
            <div><p class="seconds">00</p><p>Seconds</p></div>
        </div>
    </div>

2. CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Lobster', cursive;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffcc00;
}

.clock {
    display: flex;
}

.clock div {
    position: relative;
    margin: 0 5px;
    width: 200px;
    height: 240px;
}

.clock div p {
    position: relative;
    display: flex;
    width: 200px;
    height: 160px;
    justify-content: center;
    align-items: center;
    background-color: #f2ed6f;
    z-index: 1;
    font-size: 80px;
    border: none;
    box-shadow: 0px 34px 45px 0px rgba(0,0,0,0.56);
}

.clock div p:first-child {
    border-radius: 20px 20px 0 0;
}

.clock div p:last-child {
    font-size: 30px;
    height: 80px;
    background-color: #f4e04d;
    border-radius: 0 0 20px 20px;
}

.clock div:last-child p {
    background-color: #7A15A2;
    color: white;
}

.clock div:last-child p:last-child {
    background-color: #510F6B;
    color: white;
}

3. JAVASCRIPT

function clock() {
    const hours = document.querySelector(".hours")
    const minutes = document.querySelector(".minutes")
    const seconds = document.querySelector(".seconds")

    hours.innerHTML = new Date().getHours();
    minutes.innerHTML = new Date().getMinutes();
    seconds.innerHTML = new Date().getSeconds();

    if (minutes.innerHTML.toString().length == 1) {
        minutes.innerHTML = "0" + minutes.innerHTML;
    }

    if (seconds.innerHTML.toString().length == 1) {
        seconds.innerHTML = "0" + seconds.innerHTML;
    }

    if (hours.innerHTML.toString().length == 1) {
        hours.innerHTML = "0" + hours.innerHTML;
    }
}

const interval = setInterval(clock, 1000)



Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.