Un reloj es un dispositivo que sirve para medir el tiempo. 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 tiempos de llegada de trenes, autobuses, vuelos, etc. El reloj es básicamente de dos tipos, analógico y digital. Aquí, diseñaremos el reloj digital y agregaremos algo de estilo para hacerlo más atractivo.
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 al llamar a la misma función cada segundo y hacer que los relojes se vean más atractivos.
Código HTML y CSS: en esta sección, tenemos un tiempo ficticio en el formato de «HH: MM: SS» envuelto dentro de una etiqueta «div» y hemos incluido el archivo CSS y JavaScript externamente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Digital clock</title>
<style>
/* Link for Google font */
@import url(
'https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
body {
/* Set background color of body */
background-color: #afd275;
/* Place item to center */
align-items: center;
display: flex;
justify-content: center;
/* Specify the vertical height */
height: 100vh;
overflow-y: hidden;
}
.clock {
position: absolute;
/* Put the clock content on
center of the screen */
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: white;
font-size: 60px;
font-family: Orbitron;
/* Provide space between letter of clock */
letter-spacing: 7px;
align-items: center;
border-radius: 50px;
display: flex;
justify-content: center;
margin-right: 4rem;
height: 500px;
width: 550px;
/* Set the neumorphism effect to
the body of clock */
background-color: #afd275;
box-shadow: inset 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
inset -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
}
</style>
</head>
<body>
<div class="container">
<div id="MyClockDisplay"
class="clock" onload="showTime()">
</div>
</div>
<!-- Include JavaScript file -->
<script src="index.js"></script>
</body>
</html>
Código JavaScript:
- 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 el formato de 24 horas, por lo que volvemos a cambiar la hora a 1 cuando supera las 12. El AM/PM también cambia de acuerdo con eso.
- Paso 5: Ahora crea una string usando el mismo formato HH:MM:SS cambiando la hora, el minuto y el segundo valor con los valores que obtenemos de los métodos del 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.
Javascript
// Function to display the time
function showTime() {
// Using Date object to get
// today's date and time
var date = new Date();
// getHOurs() function is used
// to get hours ones
var h = date.getHours(); // 0 - 23
// getMinutes() function is
// used to get minutes ones
var m = date.getMinutes(); // 0 - 59
// getSecond() function is
// used to get seconds ones
var s = date.getSeconds(); // 0 - 59
// To show am or pm
var session = "AM";
// Condition to check that if hours
// reaches to 12 then it again start
// with 12
if (h == 0) {
h = 12;
}
// If hour exceeds 12 than it will
// be subtract from 12 and make
// session as pm
if (h > 12) {
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":"
+ s + " " + session;
// Using DOM element to display
// elements on screen
document.getElementById("MyClockDisplay")
.innerText = time;
document.getElementById("MyClockDisplay")
.textContent = time;
// Call the function every second use
// setInterval() method and set time-interval
// as 1000ms which is equal to 1s
setTimeout(showTime, 1000);
}
showTime();
Producción:
