SP UNIVERSO 馃崅 "Descubre la conveniencia y la precisi贸n en un RELOJ DIGITAL 脷NICO.
Nuestro reloj digital, desarrollado con HTML, CSS y JavaScript en Visual Studio Code, ofrece la capacidad de actualizar AUTOM脕TICAMENTE LA HORA local, brind谩ndote siempre la informaci贸n m谩s precisa. Con su dise帽o moderno y elegante, este reloj digital se adapta perfectamente a cualquier entorno, ya sea en tu hogar, oficina o en movimiento.
Gracias a su funcionalidad intuitiva y f谩cil de usar, podr谩s ver la hora con solo un vistazo, sin la necesidad de realizar ajustes manuales.
Adem谩s, su estructura basada en HTML, CSS y JavaScript permite una personalizaci贸n completa para adaptarse a tus preferencias. Experimenta la combinaci贸n perfecta de tecnolog铆a y estilo con nuestro reloj digital.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Reloj Digital</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="contenido-header">
<div class="fondo" id="fondo">
<h1 class="texto">Reloj digital</h1>
</div>
</div>
<div class="container1">
<br>
<br>
<div class="clock">
<div id="time"></div>
<div id="ampm"></div>
</div>
<br>
<br>
<div class="alarm">
<label for="alarmTime">Hora de alarma:</label>
<br>
<br>
<input type="time" id="alarmTime">
<button onclick="setAlarm()">Configurar alarma</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
.container1{
background-image: url("img/fond1.jpg");
background-size: cover;
font-family: Arial, sans-serif;
width: 600px;
height: 600px;
margin: 100px;
border-radius: 60px;
border-style: groove;
border-color: #713964;
border-color: #ccabc0;
padding: 90px;
text-align: center;
border-width: 40px;
}
.clock {
font-size: 70px;
color: white;
}
.alarm{
margin: 40px;
color: white;
font-size: 40px;
}
#alarmTime{
margin: 30px;
padding: 20px;
border-radius: 10px;
font-size: larger;
}
.alarm button {
margin: 30px;
padding: 20px;
border-radius: 10px;
font-size: larger;
}
.contenido-header .texto {
margin: 90px;
background-image: linear-gradient(-225deg, #7c576c 0%, #713964 100%);
width: 800px;
height: 20vh;
font-size: 90px;
font-style: italic;
display: flex;
align-items: center;
justify-content: center;
color: white;
border-radius: 70px;
}
JAVASCRIPT
function getTime() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // Convertir 0 a 12
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
var timeString = hours + ':' + minutes + ':' + seconds;
var ampmString = ampm;
document.getElementById("time").innerHTML = timeString;
document.getElementById("ampm").innerHTML = ampmString;
setTimeout(getTime, 1000); // Actualizar cada segundo
}
function setAlarm() {
var alarmTime = document.getElementById("alarmTime").value;
if (alarmTime) {
var now = new Date();
var alarm = new Date(now.toDateString() + " " + alarmTime);
var difference = alarm - now;
if (difference < 0) {
difference += 24 * 60 * 60 * 1000; // Agregar 24 horas si la alarma es para el d铆a siguiente
}
setTimeout(function() {
alert("¡Despierta!");
}, difference);
}
}
getTime();
0 comments:
Publicar un comentario