Los relojes son un elemento útil para cualquier interfaz de usuario si se usan de manera adecuada. Los relojes se pueden usar en sitios donde el tiempo es la principal preocupación, como algunos sitios de reserva o alguna aplicación que muestra los horarios de llegada de trenes, autobuses, vuelos, etc. El reloj es básicamente de dos tipos, analógico y digital. Buscaremos hacer uno digital.
Enfoque: el enfoque es usar el objeto de fecha para obtener la hora cada segundo y luego volver a representar la hora en el navegador usando la nueva hora que obtuvimos llamando a la misma función cada segundo.
Código HTML: en esta sección, tenemos un tiempo ficticio en el formato de «HH: MM: SS» envuelto dentro de una etiqueta «div».
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Digital Clock</title> <link rel="stylesheet" href="clock2.css"> </head> <body> <div id="clock">8:10:45</div> <script src="clock2.js"></script> </body> </html>
Código CSS: para CSS, acabamos de alinear nuestro reloj con el centro de la página. Aparte de eso, es solo un tamaño de fuente y un ancho que puede ajustar según sus necesidades.
CSS
#clock {
font-size: 175px;
width: 900px;
margin: 200px;
text-align: center;
border: 2px solid black;
border-radius: 20px;
}
Código JavaScript: para JavaScript, siga los pasos que se indican a continuación.
- Paso 1: Crear una función «showTime».
- Paso 2: Cree una instancia del objeto Fecha .
- Paso 3: Usando los métodos del objeto Fecha , obtenga «horas», «minutos» y «segundos».
- Paso 4: Configure AM/PM según el valor de la hora. El objeto Fecha funciona en formato de 24 horas, por lo que volvemos a cambiar la hora a 1 cuando es mayor que 12. El AM/PM también cambia de acuerdo con eso.
- Paso 5: Ahora haga una string usando el mismo formato HH:MM:SS cambiando el valor de hora, minuto y segundo con los valores que obtenemos de los métodos de objeto Fecha .
- Paso 6: ahora reemplace la variable de string en el «div» usando la propiedad innerHTML .
- Paso 7: para llamar a la función cada segundo, use el método setInterval() y establezca el intervalo de tiempo en 1000 ms, que es igual a 1 s.
- Paso 8: ahora llame a la función al final para iniciar la función en el tiempo exacto de recarga/renderizado, ya que setInterval() llamará primero después de 1 segundo de renderizado.
Nota: puede usar fuentes digitales disponibles en línea para que el reloj se vea más hermoso. Para eso, debe descargar su archivo en su proyecto y luego usar la propiedad «font-face» para usar esa fuente personalizada.
javascript
setInterval(showTime, 1000);
function showTime() {
let time = new Date();
let hour = time.getHours();
let min = time.getMinutes();
let sec = time.getSeconds();
am_pm = "AM";
if (hour > 12) {
hour -= 12;
am_pm = "PM";
}
if (hour == 0) {
hr = 12;
am_pm = "AM";
}
hour = hour < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
let currentTime = hour + ":"
+ min + ":" + sec + am_pm;
document.getElementById("clock")
.innerHTML = currentTime;
}
showTime();
Código completo: es la combinación de las tres secciones de código anteriores.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width,
initial-scale=1.0" />
<title>Digital Clock</title>
<style>
#clock {
font-size: 175px;
width: 900px;
margin: 200px;
text-align: center;
border: 2px solid black;
border-radius: 20px;
}
</style>
</head>
<body>
<div id="clock">8:10:45</div>
<script>
setInterval(showTime, 1000);
function showTime() {
let time = new Date();
let hour = time.getHours();
let min = time.getMinutes();
let sec = time.getSeconds();
am_pm = "AM";
if (hour > 12) {
hour -= 12;
am_pm = "PM";
}
if (hour == 0) {
hr = 12;
am_pm = "AM";
}
hour = hour < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
let currentTime = hour + ":"
+ min + ":" + sec + am_pm;
document.getElementById("clock")
.innerHTML = currentTime;
}
showTime();
</script>
</body>
</html>
Producción: 
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA