0

Hola estoy un poco trabado con esta linea de tiempo, la idea que quiero es que cuando llegue a cada punto aparesca el texto como viene en cada punto de la siguiente imagen: Linea de tiempo

Aqui tengo el codigo que encontre investigando en internet, es simple y no tiene estilos, y no logro acceder a cada tiempo que tiene en $eventDays, me imagino que si los llamo con javascript podria hacerlo pero no estoy seguro de como hacerlo, alguien podria guiarme para ver que podria hacer?

<?php 

$startDate = "26-10-2020";
$endDate = "30-10-2020";
$eventDays = ['Monday', 'Tuestday', 'Wednesday', 'Thursday', 'Friday'];
$startDate = new DateTime($startDate);
$endDate = new DateTime($endDate);
$currentDate = new DateTime();
$progress = 0;
if($currentDate >= $startDate){
    $totalDays = 0;
    $pastDays = 0;
    while($startDate <= $endDate){
        if(in_array(date('l', strtotime($startDate->format('d-m-Y'))), $eventDays)){
            $totalDays++;
            if($currentDate >= $startDate) $pastDays++;
        }
        $startDate->modify('+1 day');
    }
    $progress = round($pastDays * 100 / $totalDays);
}

 ?>
    <h2>Progress Bar Event | <?php echo $startDate->format('d/m/Y').' - '.$endDate->format('d/m/Y'); ?></h2>
    <p style="width:<?php echo $progress; ?>%" data-value="<?php echo $progress; ?>">Event progress:</p>
    <progress id="prog" max="100" value="<?php echo $progress; ?>" class="html5">
        <div class="progress-bar">
            <span style="width: <?php echo $progress; ?>%"><?php echo $progress; ?>%</span>
        </div>
    </progress>
3
  • 1
    Has intentado algo con javascript hasta ahora ¿? Sino, primero intenta, y deten o avanza la barra en donde la necesites. -> w3schools.com/howto/howto_js_progressbar.asp
    – Excorpion
    el 27 oct. 2020 a las 12:37
  • wow la verdad que no conosco mucho de javascript pero con eso me guiaste muy bien ya pude hacerlo te lo agradesco mucho!
    – styuto
    el 27 oct. 2020 a las 23:31
  • Comparte tu mismo tu propia solución al problema, y luego podrás marcarla como tu respuesta ;) Lo importante es que lo aprendiste de tu mano
    – Excorpion
    el 28 oct. 2020 a las 11:47

1 respuesta 1

0

Utilice este codigo, lque mediante la llamada window.onload se carga en automatico al iniciar la pagina y muestra los letreros segun el porcentaje que lleve la barra progresiva

$var i = 0;
window.onload = function move() {
    if (i == 0) {
        i = 1;
        
        if(document.getElementById("prog")) {
            var width = document.getElementById("prog").value;
            var id = setInterval(frame, 10);
            function frame() {  
                if (width >= 20){
                    document.getElementById('p1').innerHTML = 'Estamos Trabajando en tu Análisis de Sitio';
                }
                if (width >= 40){
                    document.getElementById('p1').innerHTML = 'Estamos Trabajando en la Logística de tu Proyecto';
                }
                if (width >= 60){
                    document.getElementById('p1').innerHTML = 'Estamos Trabajando en el Equipamiento de tu Propiedad';
                }
                if (width >= 80){
                    document.getElementById('p1').innerHTML = 'Estamos Trabajando en el Diseño de tu Propiedad';
                }
                if (width >= 100){
                    document.getElementById('p1').innerHTML = '¡Listo! Ya Puedes Descargar tu Proyecto!';
                }
            }
        }
    }
}

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.