montre ou horloge

Ouvrir dans l'éditeur Publiez votre code

Recommandé

28 September 2025

Modèle HTML pour boutique de baskets en ligne

13 July 2024

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é

Modèle HTML pour boutique de baskets en ligne

Bouton Lucioles

Bouton électrique

HTML

CSS

JS

Recommandé

Modèle HTML pour boutique de baskets en ligne

Bouton Lucioles

Bouton électrique

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS