JavaScript - Problemas Ejercicio con Cronometro

   
Vista:
Imágen de perfil de Francisco

Problemas Ejercicio con Cronometro

Publicado por Francisco (6 intervenciones) el 05/12/2014 12:57:52
Buenas,
He aqui otro ejercicio que no consigo solventar(es un cronometro). Para ser sincero tengo que entregarlo este lunes y como ya comente en un post anterior, soy jodiamente incapaz puesto que me dan mucha caña en el curso. Por eso recurro a expertos como vosotros(xve).

Esto es lo que me piden:

Añadir al cronómetro con memoria una lista debajo de los botones, que muestre los instantes en que el cronómetro ha parado de contar. La lista deberá vaciarse con el botón de inicializar del cronómetro. La lista deberá guardarse además en una variable de localStorage, para que los valores se guarden entre invocaciones sucesivas.

Sugerencia: añadir un bloque <div> vacio debajo de los botones donde se guarden los
instantes de parada como líneas HTML separadas por <br>. En cada parada se añadirá una
nueva línea.

Modificar además lo siguiente:

- La respuesta al botón de inicializar, para no inicializar si se pulsa mientras el cronómetro está en marcha. Se sugiere comprobar “t === undefined” antes de inicializar.

- Añadir los eventos tactiles tap y swipe sobre el body del cronómetro, para que las
operaciones parar/arrancar e inicializar se puedan hacer con tap y swipe respectivamente.

- Añadir una imagen de fondo con una esfera de cronómetro a la caja donde está el contador y posicionar el contador en la parte de la imagen donde estaría la cuenta en uno real, de forma que se visualice con más realismo. Se puede utilizar la imagen de cronómetro que se suministra con los ejemplos del módulo o buscar una en Internet. La lista de paradas estará debajo de la esfera.


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
<!DOCTYPE html>
<html>
<head><title>Cronómetro</title><meta charset="UTF-8">
<script type="text/javascript" src="zepto.min.js" > </script>
<script type="text/javascript">
  $(function(){
    localStorage.c = (localStorage.c || "0.0");
 
    var t, cl = $("#crono");
 
    function incr()     { localStorage.c = +localStorage.c + 0.1; }
    function mostrar()  { cl.html((+localStorage.c).toFixed(1)); };
    function arrancar() { t=setInterval(function(){incr(); mostrar()}, 100);};
    function parar()    { clearInterval(t);  t=undefined; };
    function cambiar()  { if (!t) arrancar(); else parar(); };
 
    $("#cambiar").on('click', cambiar);
    $("#inicializar").on('click', function(){ localStorage.c="0.0"; mostrar();});
    mostrar();
  });
</script>
</head>
<body>
<h2>Cronómetro</h2>
 
<h3><span id="crono"> 0.0 </span> segundos </h3>
 
<button type="button" id="cambiar"> arrancar/parar </button>
<button type="button" id="inicializar">  inicializar </button>
</body>
</html>


¿Alguna idea caballeros/señoritas?
Todo ayuda por pequeña que sea sera muy agradecida (xve) ;)
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Problemas Ejercicio con Cronometro

Publicado por xve (1595 intervenciones) el 05/12/2014 20:10:30
Hola Francisco, por lo que leo, me parece que este código lo tienes en estos 3 ejemplos...

http://www.lawebdelprogramador.com/codigo/buscar.php?opc=1&id=45&charSearch=cronometro

El contador de vueltas, te va mostrando los tiempos, y el Cronometro que continua aunque se cierre el navegador, guarda en la base de datos del navegador...

Coméntanos si te sirve, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Francisco

Problemas Ejercicio con Cronometro

Publicado por Francisco (6 intervenciones) el 11/12/2014 11:00:31
Gracias, el ejemplo me ha servido.

Pero ahora ando atascado por que no se mostrar el listado de paradas del cronometro en pantalla atraves del DIV.

Te dejo el codigo a ver si sabes que es lo que me falla.Por que yo no lo veo.

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
<!DOCTYPE html>
<html>
<head><title>Cronómetro</title><meta charset="UTF-8">
<script type="text/javascript" src="zepto.min.js" > </script>
<script type="text/javascript">
  $(function(){
    localStorage.c = (localStorage.c || "0.0");
 
    var t, cl = $("#crono");
 
    function incr()     { localStorage.c = +localStorage.c + 0.1; }
    function mostrar()  { var ultimo= document.createElement("div"); cl.html((+localStorage.c).toFixed(1));document.getElementById("lista").insertBefore (ultimo, document.getElementById("lista").getElementsByTagName("div")[0]);};
    function arrancar() { t=setInterval(function(){incr(); mostrar()}, 100);};
    function parar()    { localStorage.lista=clearInterval(t);  t=undefined;  };
    function cambiar()  { if (!t) arrancar(); else parar(); };
 
 
    $("#cambiar").on('click', cambiar);
    $("#inicializar").on('click', function(){ localStorage.c="0.0"; mostrar();});
    mostrar();
 
  });
</script>
</head>
<body>
<h2>Cronómetro</h2>
 
<h3><span id="crono"> 0.0 </span> segundos </h3>
 
<button type="button" id="cambiar"> arrancar/parar </button>
<button type="button" id="inicializar">  inicializar </button>
<div id="lista"> </div>
</body>
</html>

Tb te adjunto el archivo.

GRACIAS!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problemas Ejercicio con Cronometro

Publicado por jackfido ixoyerec.jackfido@gmail.com (1 intervención) el 15/12/2014 03:05:55
jejejeje amigo yo tmb estoy en el curso, he acudido buscando imagenes para el cronometro, eso es lo mas dificil que considero para mi :P pero ya veo que no soy el unico con este asunto jeje no pues mucho exito!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Francisco

Problemas Ejercicio con Cronometro

Publicado por Francisco (6 intervenciones) el 15/12/2014 09:25:02
Hola, Otro compañero del curso me ha dicho que en el foro de Miriadax hay mucha ayuda, la verdad es que no habia caido.

ahi te dejo el link:
https://www.miriadax.net/web/html5mooc/foro/-/message_boards?_19_mbCategoryId=24534366

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar