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.
¿Alguna idea caballeros/señoritas?
Todo ayuda por pequeña que sea sera muy agradecida (xve) ;)
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) ;)
- cronometro.zip(8,8 KB)
Valora esta pregunta
0
