Estoy comenzando a practicar con JavaScript. Ya hace poco monte un Reloj digital sencillo usando la hora local de mi pc; me he propuesto a agregarle algo más, que me muestre el día actual en el que nos encontramos.
Esto lo quiero lograr con una sola etiqueta <p>
donde contenga los días: Lun - Mar - Mie - Jue - Vie - Sab - Dom
. La idea es aplicarle un estilo distinto al día actual utilizando una etiqueta <span>
; no sé si es la forma correcta de hacerlo o si existe una forma mas eficiente que consuma menos recursos y quisiera que me ayudaran con esto para mejorar mi código.
Mi problema actual se resume en que de alguna forma estoy utilizando erróneamente el Element.classList.add("class");
y no consigo actualizar la clase de mi elemento.
Adjunto mi código:
"use strict";
const hora = document.getElementById("hora");
const fecha = document.getElementById("fecha");
const dias = document.getElementById("dia");
let diasString = '<span id="lun"> Lun </span> - <span id="mar"> Mar </span> - <span id="mie"> Mie </span> - ' +
'<span id="jue">Jue </span> - <span id="vie"> Vie </span> - <span id="sab"> Sab </span> - <span id="dom"> Dom </span>';
const nombreMeses = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio",
"Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
dias.innerHTML = diasString;
const obtenerHora = ()=>{
const local = new Date();
let day = local.getDate(),
month = local.getMonth(),
year = local.getFullYear();
let obtenerHora = local.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric',
hour12: true });
let tiempo= obtenerHora.slice(0, -2);
let momento = obtenerHora.slice(-2);
hora.innerHTML = `${tiempo} <span class="ampm">${momento[0]}.${momento[1]}.</span>`;
fecha.innerHTML = `${day} / ${nombreMeses[month]} / ${year}`;
// ------------------------------------------------------------------------------------------------------------
let dia = local.getDay();
let diasFinal = diasString;
dias.innerHTML = diasFinal;
switch(dia){
case 0:
let diaActual = document.getElementById("dom");
diaActual.classList.add("dia-activo");
break;
case 1:
let diaActual = document.getElementById("lun");
diaActual.classList.add("dia-activo");
break;
case 2:
let diaActual = document.getElementById("mar");
diaActual.classList.add("dia-activo");
break;
case 3:
let diaActual = document.getElementById("mie");
diaActual.classList.add("dia-activo");
break;
case 4:
let diaActual = document.getElementById("jue");
diaActual.classList.add("dia-activo");
break;
case 5:
let diaActual = document.getElementById("vie");
diaActual.classList.add("dia-activo");
break;
case 6:
let diaActual = document.getElementById("sab");
diaActual.classList.add("dia-activo");
break;
default:
diasFinal = diasString;
}
dias.innerHTML = diasFinal;
}
obtenerHora();
setInterval(obtenerHora,1000);
* {
margin: 0;
padding: 0;
}
body{
background: url(fondo2.jpg) no-repeat center center fixed;
background-size: cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'lato';
}
.contenedor-reloj{
text-align: center;
color: #fff;
}
.contenedor-reloj h1{
font-size: 12rem;
font-weight: 400;
text-shadow: 0 0 20px #409CFA;
}
.fechas{
font-size: 2.5rem;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-shadow: 0 0 10px #409CFA;
}
.dias{
font-size: 1.5rem;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: rgb(155, 155, 155);
text-shadow: 0 0 8px #409CFA;
}
.dia-activo{
color: #fff;
text-shadow: 0 0 10px #409CFA;
font-size: 2rem;
}
.ampm{
font-size: 5rem;
}
<!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" class="fechas">fecha</p>
<br><br>
<p id="dia" class="dias">dia-dia-dia-dia-dia-dia-dia</p>
</div>
<script src="reloj.js"></script>
</body>
</html>
No logro obtener el efecto deseado ya que no logro agregar la clase deseada a los elementos.