Tengo un indicador de abierto y cerrado (¡Gracias a los que me ayudaron!) que muestra que estoy abierto de 8:00 a. m. a 10:00 p. m. y de 10:00 p. m. a 8:00 a. m. estoy cerrado, pero muestra esto incluso en un fin de semana cuando no estoy abierto. ¿Me pueden ayudar a hacer que Javascript diga que estoy cerrado cuando es fin de semana y en un feriado como el 24 y 25 de diciembre? A continuación será mi código actual. ¡Gracias!
JavaScript:
var messageElement = document.getElementById("message"); var circleElement = document.getElementById("circle"); const refreshStatus = () => { // Set the current time let currentDate = new Date().getHours(); // If the time is between 8 am and 10 pm if (currentDate >= 8 && currentDate <= 21) { // Update text and add classes messageElement.innerHTML = "We are open until 10 PM"; circleElement.className = 'open-circle'; messageElement.className = 'open-p'; } else { // 21 pm to 8 am messageElement.innerHTML = "We are closed until 8 AM"; circleElement.className = 'closed-circle'; messageElement.className = 'closed-p'; } } // run when starting refreshStatus(); // updates every 8 seconds setInterval(refreshStatus, 8000);CSS:
/* Start indicator CSS */ .open-circle { position: relative; top: 23rem; height: 1.5625rem; width: 1.5625rem; background-color: #00BF13; border-radius: 50%; display: inline-block; } .open-p { position: relative; top: 23rem; color: #00BF13; font-weight: bold; display: inline-block; width: 8rem; } .closed-circle { position: relative; top: 23rem; height: 1.5625rem; width: 1.5625rem; background-color: #ea001d; border-radius: 50%; display: inline-block; } .closed-p { position: relative; top: 23rem; color: #ea001d; font-weight: bold; display: inline-block; width: 8rem; } /* End indicator CSS */HTML:
<!-- Start status indicator --> <div id="circle"></div> <p id="message">We are open until 10 PM</p> <script src="js/open-closed-indicator.js"></script> <!-- End status indicator -->Puede lograr esto usando el método getDate() para el período de Navidad y use getDay() para verificar si es fin de semana.
Los días en JS son 0 = domingo y 6 = sábado. Consulte los comentarios en cada línea para obtener más información.
Para las fechas del período de Navidad, debe verificar si son los 11 meses que son diciembre y la fecha es el 24 o el 25 de diciembre.
Para mostrar diferentes mensajes cerrados, estoy usando el operador ternario JS que ayuda a escribir menos código y obtener los mismos resultados.
Demostración de trabajo en vivo.
var messageElement = document.getElementById("message"); var circleElement = document.getElementById("circle"); const refreshStatus = () => { // Get dates/time/hours let today = new Date(); //today date let currentTime = today.getHours(); //get hours let areWeekends = (today.getDay() == 6 || today.getDay() == 0) //get weekends let santaDays = (today.getMonth() == 11 && (today.getDate() == 24 || today.getDate() == 25)) //get christmas dates //Show available if this matches if (currentTime >= 8 && currentTime <= 21 && !areWeekends && !santaDays) { // Update text and add classes messageElement.innerHTML = "We are open until 10 PM"; circleElement.className = 'open-circle'; messageElement.className = 'open-p'; } else { //change text based on weekend / christmas or not - Using ternary operator Javascript messageElement.innerHTML = `We are closed ${areWeekends ? ' - weekend' : santaDays ? 'Christmas' : 'until 8am'}`; circleElement.className = 'closed-circle'; messageElement.className = 'closed-p'; } } // run when starting refreshStatus(); // updates every 8 seconds setInterval(refreshStatus, 8000); /* Start indicator CSS */ .open-circle { position: relative; top: 23rem; height: 1.5625rem; width: 1.5625rem; background-color: #00BF13; border-radius: 50%; display: inline-block; } .open-p { position: relative; top: 23rem; color: #00BF13; font-weight: bold; display: inline-block; width: 8rem; } .closed-circle { position: relative; top: 23rem; height: 1.5625rem; width: 1.5625rem; background-color: #ea001d; border-radius: 50%; display: inline-block; } .closed-p { position: relative; top: 23rem; color: #ea001d; font-weight: bold; display: inline-block; width: 8rem; } /* End indicator CSS */ <!-- Start status indicator --> <div id="circle"></div> <p id="message">We are open until 10 PM</p> <!-- //<script src="js/open-closed-indicator.js"></script> --> <!-- End status indicator -->prueba esto
// set your holidays const holidays = [ {'2022-12-25' : 'christmas'}, {'2022-01-29' : 'testHoliday'}, ] const refreshStatus = () => { // added code let date = new Date(); let dayOfWeek = date.getDay(); // 6: saturday, 0: sunday let today = date.getFullYear() + '-' + String(date.getMonth()+1).padStart(2, '0') + '-' + date.getDate(); // 2022-01-29 let isHoliday = holidays.filter(h => h[today]).length > 0 || dayOfWeek == 6 || dayOfWeek == 9; // // Set the current time let currentDate = date.getHours(); // If the time is between 8 am and 10 pm if (currentDate >= 8 && currentDate <= 21 && !isHoliday) { // Update text and add classes messageElement.innerHTML = "We are open until 10 PM"; circleElement.className = "open-circle"; messageElement.className = "open-p"; } else { // 21 pm to 8 am messageElement.innerHTML = "We are closed until 8 AM"; circleElement.className = "closed-circle"; messageElement.className = "closed-p"; } };