Tengo un "tablón de anuncios" que muestra los próximos eventos que están ocurriendo en la comunidad.
Cada Evento se construye de la siguiente manera:
<div class=”image” id=”30-9-21” data-name=”Thursday”> <span><img src=”cooking-class.jpg” alt=”cooking class”></span> <h4 id=”date”>30/9/2021</h4> <h4 id=”day”>Thursday Night</h4> <p id=”text”>Come join us for some cooking lessons.</p> </div>Una vez que la fecha sea menor que la fecha de hoy, me gustaría crear un script que oculte ese div, para que ya no aparezca en el tablón de anuncios.
He visto algunos scripts que eliminan haciendo clic en un botón de la siguiente manera:
<button onclick=”remove_click()”> Click to remove </button> <script type=”text/javascript”> function remove_click() { var 30-9-21 = document.getElementById(“30-9-21”); 30-9-21.remove(); } </script>Me gustaría automatizar el proceso para que suceda automáticamente una vez que la identificación sea menor que Hoy.
Puede usar la función Date.prototype.getTime() para comparar la hora actual con la hora en que el objeto debe estar oculto.
Si el objeto aún debe ocultarse, simplemente reste el tiempo actual del tiempo que debe desaparecer el div para obtener los milisegundos que el programa necesita esperar.
// Fetches block let block = document.getElementById("30-9-21"); // Finds current time let now = new Date(); // Finds time to hide object let expire = new Date("9-31-2021"); // If the time to hide the object has already gone by, destroy the div block if(now.getTime() >= expire.getTime()){ block.remove(); }else{ // Otherwise, destroy it when the time to hide the object occurs. window.setTimeout(() => { block.remove(); }, expire.getTime() - now.getTime()); } <div class="image" id="30-9-21" data-name="Thursday"> <span><img src=”cooking-class.jpg” alt=”cooking class”></span> <h4 id="date">30/9/2021</h4> <h4 id="day">Thursday Night</h4> <p id="text">Come join us for some cooking lessons.</p> </div>Como no está utilizando una base de datos para consultar sus datos, esto es lo que sugeriría.
La idea que estoy tratando de mostrar es que si mantiene una matriz de "clases", podrá comparar la fecha y agregarla al documento solo si cumple con el requisito.
Puedes probarlo a continuación. Siéntase libre de agregar el texto alternativo o cualquier otra identificación o clase.
let classArray = [ { date: '9-30-2021', time: 'Night', text: 'Come join us for some cooking lessons', image: 'cooking-class.jpg' }, { date: '10-4-2021', time: 'Night', text: 'Come join us for some cooking lessons', image: 'cooking-class.jpg' }, { date: '10-10-2021', time: 'Night', text: 'Come join us for some cooking lessons', image: 'cooking-class.jpg' } ]; let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; function generateClass(data) { let classContainer = document.createElement("div"); classContainer.className = 'image'; classContainer.id = data.date; let date = new Date(data.date); classContainer.setAttribute('data-name', days[date.getDay()]) classContainer classContainer.innerHTML = ` <span><img src="${data.image}"></span> <h4 id="date">${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}</h4> <h4 id="day">${days[date.getDay()]} ${data.time}</h4> <p id="text">${data.text}</p> `; return classContainer; } let today = new Date(); for(let i=0; i < classArray.length; i++) { if(new Date(classArray[i].date) > today) { document.getElementById('class-list').append(generateClass(classArray[i])); } } <div id="class-list"></div>No use la fecha en el atributo de id , use un atributo especial para esto porque puede tener múltiples eventos con la misma fecha (usar varias identificaciones con el mismo valor es una mala práctica), por lo que he usado el atributo de date , verifique el código a continuación.
Y si desea cambiar el formato de fecha de date-month-year a month/date/year actualice el formato de fecha y el divisor de fecha en la variable htmlDateSettings en javascript a continuación.
He aumentado un día hasta la fecha del evento, si desea ocultar el evento que es menor que ahora, elimine filteredDate = filteredDate + msInOneDay; en javascript a continuación.
He usado dos eventos con diferente fecha.
He filtrado el formato de fecha porque javascript necesita un formato de fecha diferente al tuyo.
Bien, ahora ocultará automáticamente los eventos que hayan expirado o que estén dentro de menos de un día.
const htmlDateSettings = { "date-format": "dmy", "date-devider": "-" } removeExpiredEvents(); // call function automatically function removeExpiredEvents() { let eventItems = Array.from(document.querySelectorAll('.eventItem')); let df = htmlDateSettings['date-format']; let dd = htmlDateSettings['date-devider']; let msInOneDay = 1000 * 60 * 60 * 24; let today = new Date().getTime(); for(let eventItem of eventItems) { let date = eventItem.getAttribute('date'); if(!date) continue; date = date.split(dd); let dateFormat = df.split(dd); let filteredDate = `${date[dateFormat.indexOf('m')]}/${date[dateFormat.indexOf('d')]}/${date[dateFormat.indexOf('y')]}`; filteredDate = new Date(filteredDate).getTime(); filteredDate = filteredDate + msInOneDay; // increased 1 day in event date if(today > filteredDate) eventItem.style.display = 'none'; } } <div class="image eventItem" date="30-9-21" data-name="Thursday"> <span><img src="cooking-class.jpg" alt="cooking class"></span> <h4 id="date">30/9/2021</h4> <h4 id="day">Thursday Night</h4> <p id="text">Come join us for some cooking lessons.</p> </div> <!-- today event --> <div class="image eventItem" date="12-10-21" data-name="Thursday"> <span><img src="cooking-class.jpg" alt="cooking class"></span> <h4 id="date">12/10/2021</h4> <h4 id="day">Thursday Night</h4> <p id="text">Come join us for some cooking lessons.</p> </div>