reloj o reloj

1,810 smartdata350

Abrir en el editor Publica tu código

Recomendado

18 December 2025

Código fuente HTML5 del juego Monkey Mart

31 January 2026

Diseño de tarjeta CSS con fondo degradado

13 June 2025

Un código de ashimadison8

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