Webleb - Extraits de Code - montre ou horloge

HTML

CSS

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #161616, #ff0000, #bbff00);
    background: linear-gradient(135deg, #161616, #ff0000, #bbff00);
    background: linear-gradient(135deg, #161616, #ff0000, #bbff00);
    color: rgb(196, 196, 196);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.reloj-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #000000;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 20px rgb(179, 255, 0);
}

.reloj {
    text-align: center;
}

.pantalla {
    background: rgba(0, 0, 0, 0.288);
    border: 1px solid #000000;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
}

#fecha,
#hora {
    font-size: 2rem;
    margin: 10px 0;
    font-weight: bold;
    text-shadow: 0 0 10px #ff0000;
}

.controles {
    display: flex;
    justify-content: space-around;
}

button {
    background: linear-gradient(190deg, #ff0000, #0f0f0f);
    border: none;
    color: rgb(255, 185, 185);
    padding: 10px 15px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    text-shadow: 0 0 5px #ff0000;
    transition: background 0.3s;
}

button:hover {
    background: linear-gradient(45deg, #66ff00, #ff0000);
    box-shadow: 0 0 10px rgb(94, 255, 0);
}

JS

const fechaElemento = document.getElementById('fecha');
const horaElemento = document.getElementById('hora');

let fechaActual = new Date();

// Actualiza la pantalla con la fecha y hora actual
function actualizarPantalla() {
  const milisegundos = fechaActual.getMilliseconds().toString().padStart(3, '0');
  fechaElemento.textContent = fechaActual.toDateString();
  horaElemento.textContent = `${fechaActual
    .toTimeString()
    .split(' ')[0]}.${milisegundos}`;
}

// Avanza el reloj automáticamente
setInterval(() => {
  fechaActual.setMilliseconds(fechaActual.getMilliseconds() + 10);
  actualizarPantalla();
}, 10);

// Funciones para ajustar la hora
document.getElementById('btnHoraMas').addEventListener('click', () => {
  fechaActual.setHours(fechaActual.getHours() + 1);
  actualizarPantalla();
});

document.getElementById('btnHoraMenos').addEventListener('click', () => {
  fechaActual.setHours(fechaActual.getHours() - 1);
  actualizarPantalla();
});

document.getElementById('btnMinutoMas').addEventListener('click', () => {
  fechaActual.setMinutes(fechaActual.getMinutes() + 1);
  actualizarPantalla();
});

document.getElementById('btnMinutoMenos').addEventListener('click', () => {
  fechaActual.setMinutes(fechaActual.getMinutes() - 1);
  actualizarPantalla();
});

document.getElementById('btnDiaMas').addEventListener('click', () => {
  fechaActual.setDate(fechaActual.getDate() + 1);
  actualizarPantalla();
});

document.getElementById('btnDiaMenos').addEventListener('click', () => {
  fechaActual.setDate(fechaActual.getDate() - 1);
  actualizarPantalla();
});

// Inicializa la pantalla
actualizarPantalla();

montre ou horloge

Recommandé

Carrousel de cartes 3D HTML CSS JavaScript

Bouton survolé

poitrine ouverte

HTML

CSS

JS

Recommandé

Carrousel de cartes 3D HTML CSS JavaScript

Bouton survolé

poitrine ouverte

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS