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
vacio debajo de los botones donde se guarden los
instantes de parada como líneas HTML separadas por
. 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. - Alojar el script como un recurso público en un servidor en la nube para que pueda accederse por cualquier usuario desde cualquier navegador.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>The web site of jose-arjona</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript" src="touch.js" ></script>
<script type="text/javascript">
$(function()
{
var t;
var cl=$("#crono");
var rep=$("#liststop");
var ditet = $('#areatactil');
localStorage.segons = ( localStorage.segons || "0.0");
localStorage.llista = ( localStorage.llista || "");
function init_segons()
{ localStorage.segons = "0.0";
localStorage.llista = "";
}
function afegir()
{
localStorage.segons = +localStorage.segons + 0.1;
}
function mostrar()
{
cl.html((+localStorage.segons).toFixed(1));
rep.html(localStorage.llista);
};
function arrancar()
{
t=setInterval( function(){afegir(); mostrar()}, 100);
localStorage.llista = localStorage.llista + "Crono started at "+cl.html()+"<br>";
rep.html(localStorage.llista);
};
function parar()
{ if(t)
{ localStorage.llista = localStorage.llista +"Stopped at:"+cl.html()+"<br>";
rep.html(localStorage.llista);
}
clearInterval(t); t=undefined;
};
function cambiar()
{ if (!t) {arrancar(); }
else {parar();}
};
function clear()
{if (!t)
{ rep.html("Crono initialized at:"+cl.html()+"<br>");
init_segons();
mostrar();
}
else
{ rep.html((rep.html()+"Crono running.<strong>Reset not allowed!</strong><br>"));
}
}
$("#cambiar").on('click', cambiar);
$("#inicializar").on('click', clear);
ditet.on('tap', cambiar);
ditet.on('swipe', clear);
mostrar();
});
</script>
</head>
<body>
<h1>MODULO 8</h1>
<div class="cronoimage">
<div class="cronotext"><span id="crono"> 0.0 </span> </div>
</div>
<button type="button" id="cambiar">Arrancar/parar - tap event</button>
<button type="button" id="inicializar">Inicializar - swipe event</button>
<h3>Lista de acciones que se ejecutan:</h3>
<div id="liststop" class="codelist"></div>
</body>
</html>
. 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. - Alojar el script como un recurso público en un servidor en la nube para que pueda accederse por cualquier usuario desde cualquier navegador.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>The web site of jose-arjona</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript" src="touch.js" ></script>
<script type="text/javascript">
$(function()
{
var t;
var cl=$("#crono");
var rep=$("#liststop");
var ditet = $('#areatactil');
localStorage.segons = ( localStorage.segons || "0.0");
localStorage.llista = ( localStorage.llista || "");
function init_segons()
{ localStorage.segons = "0.0";
localStorage.llista = "";
}
function afegir()
{
localStorage.segons = +localStorage.segons + 0.1;
}
function mostrar()
{
cl.html((+localStorage.segons).toFixed(1));
rep.html(localStorage.llista);
};
function arrancar()
{
t=setInterval( function(){afegir(); mostrar()}, 100);
localStorage.llista = localStorage.llista + "Crono started at "+cl.html()+"<br>";
rep.html(localStorage.llista);
};
function parar()
{ if(t)
{ localStorage.llista = localStorage.llista +"Stopped at:"+cl.html()+"<br>";
rep.html(localStorage.llista);
}
clearInterval(t); t=undefined;
};
function cambiar()
{ if (!t) {arrancar(); }
else {parar();}
};
function clear()
{if (!t)
{ rep.html("Crono initialized at:"+cl.html()+"<br>");
init_segons();
mostrar();
}
else
{ rep.html((rep.html()+"Crono running.<strong>Reset not allowed!</strong><br>"));
}
}
$("#cambiar").on('click', cambiar);
$("#inicializar").on('click', clear);
ditet.on('tap', cambiar);
ditet.on('swipe', clear);
mostrar();
});
</script>
</head>
<body>
<h1>MODULO 8</h1>
<div class="cronoimage">
<div class="cronotext"><span id="crono"> 0.0 </span> </div>
</div>
<button type="button" id="cambiar">Arrancar/parar - tap event</button>
<button type="button" id="inicializar">Inicializar - swipe event</button>
<h3>Lista de acciones que se ejecutan:</h3>
<div id="liststop" class="codelist"></div>
</body>
</html>
Gracias, tu aporte me ha sido de gran utilidad
ResponderEliminar