reloj o reloj

2,106 smartdata350

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

10 January 2026

Reloj de React hecho de componentes de relojes

27 January 2026

Ultimate Game Stash HTML: interfaz de emulación de juegos

23 November 2024

Página de inicio - Furniture Inc

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);
}

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();