0

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.

2 respuestas 2

2

el codigo tal cual pusiste tiene un error, y es que estas reasignando diaActual cada vez. Lo que debes hacer es definir la variable con let una vez y luego cada vez que reasignes un valor te refieres a ella sin usar let (la estarias re-declarando)

    "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 diaActual;//aqui inicializo dia actual
    let diasFinal = diasString;
    dias.innerHTML = diasFinal;

    switch(dia){

        case 0:
       
        diaActual = document.getElementById("dom");
        diaActual.classList.add("dia-activo");

        break;

        case 1:

        diaActual = document.getElementById("lun");
        diaActual.classList.add("dia-activo");

        break;

        case 2:

        diaActual = document.getElementById("mar");
        diaActual.classList.add("dia-activo");

        break;

        case 3:
 
        diaActual = document.getElementById("mie");
        diaActual.classList.add("dia-activo");

        break;

        case 4:

        diaActual = document.getElementById("jue");
        diaActual.classList.add("dia-activo");

        break;

        case 5:

        diaActual = document.getElementById("vie");
        diaActual.classList.add("dia-activo");
        

        break;

        case 6:
        
        diaActual = document.getElementById("sab");
        diaActual.classList.add("dia-activo");

        break;

        default:
            
            diasFinal = diasString;

    } 

    dias.innerHTML = diasFinal;

}

obtenerHora();

setInterval(obtenerHora,1000);
6
  • Gracias por tu respuesta, no me había dado cuenta de ese fallo, ya esta acomodado, aun que esto no soluciono mi problema sigue sin aplicar la clase.
    – ramej
    Commented el 3 jul. 2021 a las 2:54
  • @ramej, puede haber muchas razones por las que no se aplica la clase, revisa la consola del navegador y menciona si aparece algún error ahí.
    – Triby
    Commented el 4 jul. 2021 a las 0:46
  • @Triby no, no aparece ningún error. Ne fije que no estoy quitando la clase para cuando el día cambie, pero aun sigo sin solventar, no logro que se aplique la clase.
    – ramej
    Commented el 6 jul. 2021 a las 2:24
  • lo que debe pasar es que al actualizarse todo con cada set interval no te este tomando la clase. Commented el 6 jul. 2021 a las 2:49
  • @HernánGarcia No debería en cada intervalo agregar la clase al elemento correspondiente en el switch() ?
    – ramej
    Commented el 6 jul. 2021 a las 3:18
1

Con ayuda he logrado solucionar mi problema deshaciéndome del uso del Switch() y de .classList.add(Element);

Dejo la solución por si alguien la necesita:

En primer lugar he eliminado las lineas:

let diasFinal = diasString;
dias.innerHTML = diasFinal;

y la línea al final:

dias.innerHTML = diasFinal;

Y se ha cambiado el uso del .classList.add(Element) por .children, eliminando el uso del Switch().

simplificación para el caso del interruptor:

let dia = local.getDay();

let diaActual = dias.children[(dia + 6) % 7];
let diasFinal = dias.children[(dia + 5) % 7];

diaActual.className = "dia-activo";
diasFinal.className = "inactive-day";

(agregué 6 en lugar de eliminar 1 porque (0 - 1)% 7 es -1 y no 6)

en vez de

const obtenerHora = ()=>{

puedes escribir

function obtenerHora() {

(es más estándar)

el código final:

"use strict";

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

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

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 diaActual = dias.children[(dia + 6) % 7];
    let diasFinal = dias.children[(dia + 5) % 7];
    diaActual.className = "dia-activo";
    diasFinal.className = "inactive-day";

}

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">
            <span class="inactive-day">Lun</span> -
            <span class="inactive-day">Mar</span> -
            <span class="inactive-day">Mie</span> -
            <span class="inactive-day">Jue</span> -
            <span class="inactive-day">Vie</span> -
            <span class="inactive-day">Sab</span> -
            <span class="inactive-day">Dom</span>
        </p>

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

</body>
</html>

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.