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

Publicado el 3 de Junio del 2013 por Administrador (698 códigos)
9.619 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.620 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...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2388