Đồng hồ số Javascript - DevForum

Chia sẻ

---

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)

---