// JavaScript Document // creamos la función principal $(function(){ // Varibles Mensajes Instrucciones var instrutactil="PANTALLA TÁCTIL\nTocar zona dígitos crono para arrancar/parar el crono;\nArrastrar con el dedo sobre la zona de los dígitos del crono para resetear (cuando crono esté parado).\nTambién puedes tocar en botón negro para arrancar/parar, y en botón rojo para resetear (cuando crono parado).\nAparecen tiempos de parada abajo, y si tabla llena, arrastrando sobre las paradas en la misma, puedes ver todas.\n\nPANTALLA NO TÁCTIL\nClick en botón negro reloj para arrancar/parar el crono;\nClick en botón rojo para resetear crono, cuando está parado.\nAparecen tiempos de parada abajo, y si tabla llena, con la barra scroll de la misma, puedes ver todas.\n\n\n"; var instrusimula = "SIMULADOR TÁCTIL\nSi no dispones de pantalla táctil, puedes usar la herramienta desarrollador web de Firefox: en ella usa el diseño adaptable, y luego activa el simulador de toques (icono mano).\n(Un atajo para activarlo rápido es: CTRL+MAYUSCULAS+M).\nRecarga la página para activar los eventos.\nPara arrancar/parar crono pulsa en el botón negro; \nCuando el crono esté parado, deslizarse sobre la zona dígitos para resetearlo (mantén botón izdo ratón pulsado y arrastralo por la zona de dígitos), o bien pulsar el botón rojo.\nAl llenarse la tabla de paradas de tiempo aparecerá un scroll a la derecha de la misma (se ve poco) con el que puedes ver las paradas hechas.\n\nEn Google chrome también tienes la opción de simulación: Mas herramientas->Herramientas para Desarrolladores; Una vez aquí, abajo tendrás una pestaña de emulation, y dentro de ella tendrás una opción llamada model, donde puedes elegir el dispostivo a simular.\n\n\n"; var nota = "NOTA: EN IEXPLORER ES MUY PROBABLE QUE NO FUNCIONEN LOS EVENTOS TÁCTILES!!!!\n"; // Variables programa var reloj_on; // variable control on-off del crono (si undefined, el reloj está parado) var tiempo = $("#crono"); // variable contenedor digitos (tiempo) del crono (en div#crono) var listado = $("#paradas"); // variable con la tabla de paradas en div#paradas // Variables localStorage localStorage.crono = (localStorage.crono || "00.00"); // variable crono (si no está, se inicializa a 00.00) localStorage.paradas = (localStorage.paradas || "Paradas de tiempo"); // variable paradas (si no está se pone un título) tiempo.html(localStorage.crono); // Asigno en
Paradas de tiempo
"); } // Inicio setInterval, ejecutándose la función mostrar cada centésima de segundo (10 msg) reloj_on=setInterval(mostrar, 10); // Refresco cada 10msg=1csg } // función que para el crono function parar() { clearInterval(reloj_on); // anulación de setInterval reloj_on=undefined; // ponemos reloj_on a undefined listado.html(listado.html() + "" + tiempo.html() + " segundos"); // añado a listado la parada actual // listado.append("" + tiempo.html() + " segundos"); // Otra forma // Actualizo valores localStorage localStorage.crono = tiempo.html(); // actualización crono en localStorage localStorage.paradas = listado.html(); // actualización paradas en localStorage } // función de control (mediante el valor "reloj_on") para ejecutar las funciones arrancar o parar function cambiar() { if (!reloj_on) { arrancar(); // El reloj estaba parado y ahora se arranca } else { parar(); // El reloj estaba funcionando y ahora lo paramos } } // función de reseteo del crono (mediante el valor de "reloj_on") function resetear() { if (!reloj_on) { tiempo.html("00.00"); // Reseteo del tiempo, poniéndose a 0 listado.html("CRONÓMETRO RESETEADO"); // se borran todas las paradas registradas en "listado" volviendo a su valor inicial localStorage.crono = "00.00"; // reseteamos a 0 el localStorage localStorage.paradas = "CRONÓMETRO RESETEADO"; // Al resetear, ponemos mensaje en localstorage } } // La función ayuda() simplemente muestra mensajes de ayuda con alert() function ayuda() { alert(instrutactil + instrusimula + nota); } // fin función ayuda // Creación de eventos click y táctiles $("#zona_tiempos").on("tap", function(e){ // táctil: tocar en la zona del crono donde salen los dígitos para arrancar/parar e.preventDefault(); cambiar(); }); $("#bot_on-off").on("click", cambiar); // click: arrancar/parar con click en botón negro $("#zona_tiempos").on("swipe",function(e){ // táctil: deslizar en la zona del crono donde salen los dígitos para resetear e.preventDefault(); resetear(); }); $("#bot_reset").on("click", resetear); // click: hacer click en botón rojo para resetear // Toque en botón ayuda para mostrar ayuda $("#ayuda").on("tap", function(e) { e.preventDefault(); ayuda(); }); // Click en botón ayuda para mostrar ayuda $("#ayuda").on("click", ayuda); }); // FIN FUNCIÓN PRINCIPAL