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.