Código de HTML - Ejemplo de la visualización del progreso de las tareas con HTML5 y Javascript

Imágen de perfil

Ejemplo de la visualización del progreso de las tareas con HTML5 y Javascriptgráfica de visualizaciones


HTML

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 03 de Junio del 2013 por Administrador
7.138 visualizaciones desde el 03 de Junio del 2013. Una media de 42 por semana
Código que muestra mediante HTML5 y Javascript, como mostrar una barra de progreso.

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 03 de Junio del 2013gráfica de visualizaciones de la versión: Versión 1
7.139 visualizaciones desde el 03 de Junio del 2013. Una media de 42 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo aquí: html5_js_barraProgreso.html

Forma parte de Pedro Ventura
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de la visualización del progreso de las tareas con HTML5 y Javascript</title>
<script type="text/javascript">
    //progreso actual
    var currProgress = 0;
    //esta la tarea completa
    var done = false;
    //cantidad total de progreso
    var total = 100;
 
    //funcion para actualizar el progreso
    function startProgress() {
        //recuperamos el elemento de progreso
        var prBar = document.getElementById("prog");
        //get the start button
        var startButt = document.getElementById("startBtn");
        //recuperamos el valor del texto
        var val = document.getElementById("numValue");
        //deshabilitamos el botón
        startButt.disabled=true;
        //actualiza la barra de progreso
        prBar.value = currProgress;
        //actualizamos el indicador visual con el texto
        val.innerHTML = Math.round((currProgress/total)*100)+"%";
        //incrementamos el valor del progreso cada vez que la función se ejecuta
        currProgress++;
        //comprobamos si hemos terminado
        if(currProgress>100) done=true;
        // sino hemos terminado, volvemos a llamar a la función después de un tiempo
        if(!done)
        {
            setTimeout("startProgress()", 100);
        }else{
            //tarea terminada, habilitar el botón y resetear variables
            document.getElementById("startBtn").disabled = false;
            done = false;
            currProgress = 0;
        }
    }
</script>
</head>
<body>
 
<h2>Ejemplo de la visualización del progreso de las tareas con HTML5 y Javascript</h2>
 
<p>Barra de progreso:</p>
<progress id="prog" value="0" max="100"></progress>
<input id="startBtn" type="button" value="start" onclick="startProgress()"/>
<div id="numValue">0%</div>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (1)

Juan
09 de Mayo del 2014
estrellaestrellaestrellaestrellaestrella
kisiera saber si despues de que se llene la barra osea que llegue al 100% se abra otra pagina, en que parte del codigo le tendria que mover o si me podria decir como se lo agradeceria
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2388