Código de JavaScript - Contador de vueltas

Imágen de perfil
Val: 2.003
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Contador de vueltasgráfica de visualizaciones


JavaScript

Publicado el 13 de Octubre del 2014 por Xavi (534 códigos)
3.575 visualizaciones desde el 13 de Octubre del 2014
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
3.576 visualizaciones desde el 13 de Octubre del 2014
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...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2794