var checkTime = function(){ for(var i = 9; i <= 17; i++){ if($.now() < i){ $("#hour-").addClass(".past"); } if($.now() === i){ $("#hour-").addClass(".present"); } if ($.now() > i) { $("hour-").addClass(".future"); } } }Estoy tratando de establecer un color "clase 'pasado' 'presente' 'futuro' dependiendo de la hora en que el usuario inició sesión en el sitio web, entre las 9 a. m. y las 5 p. -10... y así sucesivamente hasta la hora 17. No estoy muy seguro de cómo manejar esto, gracias si intentaste resolverlo
Primero, puede hacer que su código sea más eficiente al eliminar el ciclo y solo usar las condiciones, pero necesita usar else if solo necesita que una condición sea verdadera a la vez, pero su código puede tener múltiples declaraciones verdaderas. Además, he eliminado . de los nombres de clase tampoco necesita agregarlos, se usa solo para declarar la clase.
var checkTime = function(){ var dt = new Date(); var currHour=dt.getHour(); if(currHour < 9){ $("#hour-").addClass("past"); } else if(currHour === 9){ $("#hour-").addClass("present"); } else if(currHour > 9) { $("hour-").addClass("future"); } }Uso tres colores de fondo para representar el pasado, el presente y el futuro.
checkTime se basará en las horas de entrada (horas de inicio de sesión), para comparar con las horas actuales y asignar una clase
//Initial login hours { const date = new Date($.now()); $('input[type=text]').val(date.getHours()); } //Switch class based on login hour const checkTime = (loginHours) => { const date = new Date($.now()); if (loginHours < date.getHours()) { $('div').removeClass().addClass('past'); } else if (loginHours == date.getHours()) { $('div').removeClass().addClass('present'); } else { $('div').removeClass().addClass('future'); } }; //Add a listener and call the method $('input[type=button]').on('click', () => { const loginHours = $('input[type=text]').val(); checkTime(loginHours); }); .past { background-color: #FFD382; } .present { background-color: #82FF82; } .future { background-color: #30FFFF; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" placeholder="login hours" /> <input type="button" value="SUBMIT" /> <div>TEST DIV</div>