Código de JavaScript - Contador de vueltas

Imágen de perfil

Contador de vueltasgráfica de visualizaciones


JavaScript

Publicado el 13 de Octubre del 2014 por Xavi
1.550 visualizaciones desde el 13 de Octubre del 2014. Una media de 14 por semana
Cronometro que te permite ir contando las vueltas mostrando el tiempo en cada vuelta incluyendo los milisegundos.

Versión 1

Publicado el 13 de Octubre del 2014gráfica de visualizaciones de la versión: Versión 1
1.551 visualizaciones desde el 13 de Octubre del 2014. Una media de 14 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo aquí
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
 
	<script>
	/* http://www.lawebdelprogramador.com */
	var inicio=0;
	var vuelta=0;
	var timeout=0;
 
	function empezarDetener(elemento)
	{
		if(timeout==0)
		{
			// empieza el cronometro
			elemento.value="Detener";
 
			// Cogemos la fecha y hora actual para el cronometro y vuelta
			inicio=vuelta=new Date().getTime();
 
			// Borramos los ultimos tiempos
			document.getElementById("tiempos").innerHTML="<div></div>";
 
			// Inicamos el proceso
			funcionando();
 
			// habilitamos el botón para contar las vueltas
			document.getElementById("vuelta").disabled=false;
		}else{
			// detenemos el cronometro
			elemento.value="Empezar";
 
			// deshabilitamos el boton para contar las vueltas
			document.getElementById("vuelta").disabled=true;
 
			// Finalizamos el cronometro
			clearTimeout(timeout);
			timeout=0;
		}
	}
 
	function funcionando()
	{
		var actual = new Date().getTime();
		var diff=new Date(actual-inicio);
 
		// Mostramos la diferencia de tiempo
		var result=LeadingZero(diff.getUTCHours())+":"+LeadingZero(diff.getUTCMinutes())+":"+LeadingZero(diff.getUTCSeconds());
		document.getElementById('crono').innerHTML = result;
 
		timeout=setTimeout("funcionando()",1000);
	}
 
	/**
	 * Función que muestra cada vuelta
	 */
	function mostrarValorActual()
	{
		// Cogemos al fecha actual y la restamos de la ultima vuelta
		var actual=new Date().getTime();
		var diff=new Date(actual-vuelta);
 
		// Cogemos el nuevo valor de la vuelta
		vuelta=new Date().getTime();
 
		var ultimo=document.createElement("div");
		ultimo.innerHTML=LeadingZero(diff.getUTCHours())+":"+LeadingZero(diff.getUTCMinutes())+":"+LeadingZero(diff.getUTCSeconds())+","+diff.getUTCMilliseconds();
 
		// Mostramos el último valor por vuelta
		document.getElementById("tiempos").insertBefore(ultimo,document.getElementById("tiempos").getElementsByTagName("div")[0]);
	}
 
	/* Funcion que pone un 0 delante de un valor si es necesario */
	function LeadingZero(Time) {
		return (Time < 10) ? "0" + Time : + Time;
	}
	</script>
 
	<style>
	.crono_wrapper {float:left;text-align:center;width:200px;}
	#tiempos {float:left;}
	</style>
</head>
 
<body>
 
<h1>Contador de vueltas</h1>
 
<div class="crono_wrapper">
	<h2 id='crono'>00:00:00</h2>
	<input type="button" value="Empezar" onclick="empezarDetener(this);">
	<input type="button" value="Vuelta" id="vuelta" onclick="mostrarValorActual();" disabled>
</div>
<div id="tiempos"><div></div></div>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (0)


No hay comentarios
 

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2794