Soy muy nuevo en HTML y he encontrado algunos tutoriales en línea sobre cómo hacer barras de progreso para varios usos, pero no he encontrado nada para cuentas regresivas de mucho tiempo; (De un día a otro día).
Quiero una cuenta regresiva de la barra de progreso hasta el próximo mes. Por ejemplo, si hoy fuera 15 de abril, la barra de progreso estaría llena al 50%, ya que faltan 15 días para el próximo mes.
Idealmente, la cuenta regresiva comenzará a la izquierda usando una hora específica en un día determinado como punto de partida y se moverá hacia la derecha a medida que avanza el tiempo, llegando al final cuando la cuenta regresiva haya terminado y haya llegado la hora en la segunda fecha específica. La hora también debe ser específica para EST, no la hora local en la computadora.
Cualquier ayuda con esto sería muy apreciada gracias!!
Tendrás que:
Esto se logra obteniendo la fecha actual (a través del constructor de Date ) y obteniendo el mes actual (con Date.getMonth() ), luego construyendo una nueva fecha a través del constructor de Date y agregando 1 al índice del mes actual. Esto es lo que es nextMonth en el siguiente ejemplo.
Esto es un poco más complicado. Tendrá que obtener la diferencia de milisegundos entre las dos fechas (restando los resultados devueltos por Date.getTime() para la fecha actual y el próximo mes), luego dividiendo por 1000 (para obtener los segundos), 60 (para minutos ), 60 nuevamente (para las horas), y finalmente dividiendo por 24 (para los días).
Esto se hace configurando el mes a un mes posterior al mes actual y la fecha a 0 . ¿Por qué? Cuando se proporciona 0 para dayValue , la fecha se establecerá en el último día del mes anterior y, dado que establecemos el mes en el mes siguiente, devolverá el último día del mes actual. Llamar getDate() luego devuelve el día del mes.
Para hacer la barra de progreso, simplemente puede usar el elemento <progress> . Establezca el máximo en el número de días del mes actual y el valor en el número de días menos los días hasta el próximo mes (cuántos días han pasado en este mes hasta el momento).
const now = new Date(); const nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1); const diffDays = Math.ceil(Math.abs(nextMonth.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)); now.setMonth(now.getMonth() + 1); now.setDate(0); const daysInCurrentMonth = now.getDate(); progress.max = daysInCurrentMonth; progress.value = daysInCurrentMonth - diffDays; /* below for debug purposes only */ console.log('Days in current month: ' + daysInCurrentMonth); console.log('Days until next month: ' + diffDays); #progress { width: 100%; } <progress id="progress"></progress>