Đồ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

							

00

Hours

00

Minutes

00

Seconds

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.