घड़ी या घड़ी

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

1 June 2025

इंडेक्स के साथ बनाया गया एक मैट्रिक्स होम पेज

9 May 2025

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

घड़ी या घड़ी

अनुशंसित

घड़ी

इंडेक्स के साथ बनाया गया एक मैट्रिक्स होम पेज

अधिकृत ऐप सत्यापन

HTML

CSS

JS

अनुशंसित

घड़ी

इंडेक्स के साथ बनाया गया एक मैट्रिक्स होम पेज

अधिकृत ऐप सत्यापन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS