1

Buen Día

Buen día, estoy comenzando a practicar con JavaScript, he comenzado a crear un reloj digital con formato de 12H, todo marcha de maravilla, solo quisiera sus consejos para solucionar el siguiente inconveniente.

Mi reloj esta alojado en una etiqueta H1 (Adjunto código HTML).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilo.css">
    <title>Reloj Digital</title>
</head>
<body ondragstart="return false" onselectstart="return false" oncontextmenu="return false">

    <div class="contenedor-reloj">

        <h1 id="hora">00:00:00</h1>
        <p id="fecha">fecha</p>

    </div>
    
    <script src="reloj.js"></script>

</body>
</html>

Lo que quiero lograr es que el reloj muestre la hora 00:00:00 con un size mayor al AM/PM, pero esto lo obtengo en un solo dato, de que manera me aconsejan obtener la hora o separar los componentes para poder poder el AM/PM con un tamaño inferior en comparación a la hora (00:00:00)?

Adjunto código JavaScript.

const hora = document.getElementById("hora");
const fecha = document.getElementById("fecha");

const nombreMeses = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio",
                    "Agosto","Septiembre","Octubre","Noviembre","Diciembre"];

const intervalo = setInterval(()=>{

    const local = new Date();

    let day = local.getDate(),
        month = local.getMonth(),
        year = local.getFullYear();

    hora.innerHTML = local.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric',
    hour12: true });    
    fecha.innerHTML = `${day} / ${nombreMeses[month]} / ${year}`;

}, 1000);

La solución que he pensado es borrar el: hora.innerHTML = local.toLocaleTimeString(/*'en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }); Y remplazarlo por

let horaPrueba = local.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric',
    hour12: true });

De esa forma puedo acceder a la hora y al AM/PM por separado, Tal que:

MomentoDia = horaPrueba[9] + horaPrueba[10];

y obtener el AM /PM por separado de esa forma, sin embargo esa solución es poco presentable desde mi punto de vista, hay una forma mas sencilla de lograr lo que quiero ?

Gracias de antemano.

0

1 respuesta 1

2

El problema si usas MomentoDia = horaPrueba[9] + horaPrueba[10]; es que en la madrugada a partir de 1 AM en vez de AM te colocaría Mundefined (ya hice la prueba). Puedes hacer uso del método de slice, aquí te muestro como quedaría el código Javascript:

const hora = document.getElementById("hora");
const fecha = document.getElementById("fecha");

const nombreMeses = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio",
                    "Agosto","Septiembre","Octubre","Noviembre","Diciembre"];

const intervalo = setInterval(()=>{

    const local = new Date();

    let day = local.getDate(),
        month = local.getMonth(),
        year = local.getFullYear();   
    
    let horaPrueba = local.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric'});

    fecha.innerHTML = `${day} / ${nombreMeses[month]} / ${year}`;
    var tiempo= horaPrueba.slice(0, -2);
    var momento = horaPrueba.slice(-2);
    hora.innerHTML = `<h1>${tiempo} <span class="ampm">${momento}</span></h1> `

    

}, 1000);

En este caso, para la variable tiempo, se aplica el método slice de Javascript para obtener la cadena de la hora, sin el AM/PM, pues se cortan los dos últimos elementos, quedando solo la hora. Luego, la variable momento almacena los dos últimos elementos de lo que arroja horaPrueba, lo que equivale al momento del día.

En el CSS, como se le ha dado una clase al span que contiene la variable momento, le puedes aplicar estilos, el código sería semejante a esto:

.ampm{
    font-size: 24px;
}
2
  • Te sirvió la respuesta? Recuerda marcar como respuesta esperada si te sirvió, no solo por mi, sino también para que otros que consulten la pregunta puedan beneficiarse también? Commented el 5 jun. 2021 a las 20:19
  • 1
    Gracias, esto me ha funcionado correctamente.
    – ramej
    Commented el 6 jun. 2021 a las 18:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.