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 3 de Junio del 2013 por Administrador
9.271 visualizaciones desde el 3 de Junio del 2013
Código que muestra mediante HTML5 y Javascript, como mostrar una barra de progreso.

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 3 de Junio del 2013gráfica de visualizaciones de la versión: Versión 1
9.272 visualizaciones desde el 3 de Junio del 2013
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
9 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
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2388