Óra változó háttérszínekkel

Mi a cél?

Egy működő óra egyedi betűtípussal és dinamikusan változó háttérszínekkel.

DEMO (a képre kattintva indul)

Óra

A HTML

A kód jelen esetben csak egy div beágyazása.

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Clock</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    
    <body>
    
        <div class="clock"></div>
    
    
        <script src="js/main.js"></script>
    </body>
    
    </html>

A CSS stílus

Behúzzuk az egyedi betűtípust és középre állítjuk Flexbox-al az órát.

* {
        margin: 0;
        padding: 0;
    }
    *, *::before, *::after {
        box-sizing: inherit;
    }
    html {
        box-sizing: border-box;
    }
    body {
        height: 100vh;
        width: 100vw;
        font-family: 'Cyberverse';
        color: #000;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 5rem;
    }
    
    @font-face {
        font-family: 'Cyberverse';
        src: url('Cyberverse.otf');
        }
    
    @media(min-width: 780px) {
        body{
            font-size: 10rem;
        }
    }

A Javascript logika

A háttérszínt "véletlen" hexadecimális értékekkel változtatjuk, míg a léptetést most setInterval()-lal csináljuk, de lehetne setTimeout()-al is.


    function tictac() {
        let date = new Date();
        let hour = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
        let minute = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
        let second = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();
    
        const clock = document.querySelector('.clock');
        clock.textContent = `${hour}:${minute}:${second}`;
    
    
        let colorHour = hour;
        let colorMinute = minute;
        let colorSecond = second;
    
        if (hour < 5) {
            colorHour = 'ff';
        }
        if (minute < 30) {
            colorMinute = 'ff';
        }
        if (second < 20) {
            colorSecond = 'bf';
        }
        if (second > 40) {
            colorSecond = 'cc';
        }
    
        let hexaColor = `#${colorHour}${colorMinute}${colorSecond}`;
        document.body.style.backgroundColor = hexaColor;
    
        // setTimeout(() => {
        //     tictac();
        // }, 1000);
    
    }
    
    setInterval(() => {
        tictac();
    }, 1000)
    
    setInterval();

A teljes kód itt érhető el.