WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Reloj Futurista</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="reloj-container"> <div class="reloj"> <div class="pantalla"> <div id="fecha">01 Jan 2024</div> <div id="hora">12:00:00.000</div> </div> <div class="controles"> <button id="btnHoraMas">+ Hora</button> <button id="btnHoraMenos">- Hora</button> <button id="btnMinutoMas">+ Minuto</button> <button id="btnMinutoMenos">- Minuto</button> <button id="btnDiaMas">+ Día</button> <button id="btnDiaMenos">- Día</button> </div> </div> </div> <script src="index.js"></script> </body> </html>
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();
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Reloj Futurista</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="reloj-container"> <div class="reloj"> <div class="pantalla"> <div id="fecha">01 Jan 2024</div> <div id="hora">12:00:00.000</div> </div> <div class="controles"> <button id="btnHoraMas">+ Hora</button> <button id="btnHoraMenos">- Hora</button> <button id="btnMinutoMas">+ Minuto</button> <button id="btnMinutoMenos">- Minuto</button> <button id="btnDiaMas">+ Día</button> <button id="btnDiaMenos">- Día</button> </div> </div> </div> <script src="index.js"></script> </body> </html>
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();