html,body{
    height:100%;
}

body{
    margin:0;
    display:flex;
    justify-content: center;
    align-items: center;
    background:linear-gradient(to bottom,green,black);
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

#horloge{
    text-align: center;
    color:lime;
}

#horloge h2{
    font-size:3vw;
    margin:0;
}

#horloge h1{
    font-size:5vw;
    margin:0;
}
function maj(){
    let d = new Date();
    let annee = d.getFullYear();
    let mois = afficher2nb(d.getMonth()+1);
    let jour = afficher2nb(d.getDate());
    let heures = afficher2nb(d.getHours());
    let minutes = afficher2nb(d.getMinutes());
    let secondes = afficher2nb(d.getSeconds());

    document.body.innerHTML = `
        <div id="horloge">
            <h2>${jour}/${mois}/${annee}</h2>
            <h1>${heures}:${minutes}:${secondes}</h1>
        </div>
    `;
}

let timer = setInterval(maj,1000);

function afficher2nb(nb){
    return (nb<10) ? "0"+nb : nb;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.