Wacth/index.js at main · MrBeeza/Wacth · GitHub

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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
//valores y constantes
let timerA, timerB, PauseReplayBool=true,
	PlusHoras = document.getElementById("PlusHoras"),
	PlusMinutos = document.getElementById("PlusMinutos"),
	PlusSegundos = document.getElementById("PlusSegundos"),
	Circulo = document.getElementById("Circulo"),
	CuentaRegresiva = document.getElementById("CuentaRegresiva"),
	PausaReplay = document.getElementById("PausaReplay"),
	horasRestantes, minutosRestantes, segundosRestantes;
;

    //DOM
	function CambiosS() {
		if(PlusSegundos.value >= 60){
			PlusMinutos.value = parseInt(PlusMinutos.value, 10) + 1;
			PlusSegundos.value = parseInt(PlusSegundos.value, 10) - 60;
		}
		if(PlusSegundos.value >= 60){CambiosS();}
	}
	function CambiosM() {
		if(PlusMinutos.value >= 60){
			PlusHoras.value = parseInt(PlusHoras.value, 10) + 1;
			PlusMinutos.value = parseInt(PlusMinutos.value, 10) - 60;
		}
		if(PlusMinutos.value >= 60){CambiosM();}
	}

	/* Poner 0 cuando se quede vacio */
	function EnCero(Elemento){
		if(Elemento.value == ""){Elemento.value = 0;}
	}

	function PauseReplay() {
		/* Si se esta parado */
		console.log(PauseReplayBool);
		if(PauseReplayBool){Comenzar();}
		else{
			timerA.finish();
			clearTimeout(timerB);
			PlusHoras.value = horasRestantes;
			PlusMinutos.value = minutosRestantes;
			PlusSegundos.value = segundosRestantes;
			document.title = "Temporizador";
			PausaReplay.innerHTML = `<path d="M2.067,0.043C2.21-0.028,2.372-0.008,2.493,0.085l13.312,8.503c0.094,0.078,0.154,0.191,0.154,0.313c0,0.12-0.061,0.237-0.154,0.314L2.492,17.717c-0.07,0.057-0.162,0.087-0.25,0.087l-0.176-0.04c-0.136-0.065-0.222-0.207-0.222-0.361V0.402C1.844,0.25,1.93,0.107,2.067,0.043z"/>`;
			PauseReplayBool=true;
		}
	}

	function Comenzar() {
		// Cambios de diseño del botón
		PauseReplayBool=false;
		PausaReplay.innerHTML = `
			<rect x="-2" y="-1" width="7" height="20"/>
			<rect x="9" y="-1" width="7" height="20"/>`;

		// Limpiar cualquier temporizador previo
		if(timerA!=null){timerA.finish();}
		if(timerB!==null){clearTimeout(timerB);}

		// Obtener la hora actual
		let horaActual = new Date();

		// Obtener la hora deseada
		let horaDeseada = new Date();
		horaDeseada.setHours(horaDeseada.getHours() + parseInt(PlusHoras.value, 10));
		horaDeseada.setMinutes(horaDeseada.getMinutes() + parseInt(PlusMinutos.value, 10));
		horaDeseada.setSeconds(horaDeseada.getSeconds() + parseInt(PlusSegundos.value, 10));

		// Calcular la diferencia entre la hora deseada y la hora actual
		let tiempoRestante = horaDeseada - horaActual;

		// Calcular las horas, minutos y segundos de diferencia
		horasRestantes = Math.floor(tiempoRestante / (60 * 60 * 1000));
		minutosRestantes = Math.floor((tiempoRestante % (60 * 60 * 1000)) / (60 * 1000));
		segundosRestantes = Math.floor((tiempoRestante % (60 * 1000)) / 1000);

		// Añadir cero delante si es necesario
		let horasFormateadas = (horasRestantes < 10) ? "0" + horasRestantes : horasRestantes;
		let minutosFormateados = (minutosRestantes < 10) ? "0" + minutosRestantes : minutosRestantes;
		let segundosFormateados = (segundosRestantes < 10) ? "0" + segundosRestantes : segundosRestantes;

		// Utilizar esta diferencia como la duración total para el temporizador
		timerA=Circulo.animate([
			{strokeDasharray: "100, 100"},
			{strokeDasharray: "0, 100"}],
			{duration: tiempoRestante-500});

		// Mostrar en el temporizador y título
		CuentaRegresiva.innerHTML = horasFormateadas+" : "+minutosFormateados+" : "+segundosFormateados;
		document.title = "Temporizador "+horasFormateadas+":"+minutosFormateados+":"+segundosFormateados;

		// Bucle que va restando el tiempo
		timerB=setInterval(function(){

			// Calcular las horas, minutos y segundos de diferencia
			horasRestantes = Math.floor(tiempoRestante / (60 * 60 * 1000));
			minutosRestantes = Math.floor((tiempoRestante % (60 * 60 * 1000)) / (60 * 1000));
			segundosRestantes = Math.floor((tiempoRestante % (60 * 1000)) / 1000);

			// Añadir cero delante si es necesario
			horasFormateadas = (horasRestantes < 10) ? "0" + horasRestantes : horasRestantes;
			minutosFormateados = (minutosRestantes < 10) ? "0" + minutosRestantes : minutosRestantes;
			segundosFormateados = (segundosRestantes < 10) ? "0" + segundosRestantes : segundosRestantes;

			// Obtener la hora actual
			horaActual = new Date();

			// Calcular la diferencia entre la hora deseada y la hora actual
			tiempoRestante = horaDeseada - horaActual;

			// Terminar el bucle si el tiempo llega a cero
			if(horasRestantes<0 && minutosRestantes<0 && segundosRestantes<0){
				finish.playclip();
				clearTimeout(timerB);
				// Cambios de diseño del botón al finalizar
				PausaReplay.innerHTML = `<path d="M2.067,0.043C2.21-0.028,2.372-0.008,2.493,0.085l13.312,8.503c0.094,0.078,0.154,0.191,0.154,0.313c0,0.12-0.061,0.237-0.154,0.314L2.492,17.717c-0.07,0.057-0.162,0.087-0.25,0.087l-0.176-0.04c-0.136-0.065-0.222-0.207-0.222-0.361V0.402C1.844,0.25,1.93,0.107,2.067,0.043z"/>`;
				PauseReplayBool=true;

			}

			// Actualizar el temporizador y título si el tiempo es mayor o igual a cero
			if(tiempoRestante>=0) {
				CuentaRegresiva.innerHTML = horasFormateadas+" : "+minutosFormateados+" : "+segundosFormateados;
				document.title = "Temporizador "+horasFormateadas+":"+minutosFormateados+":"+segundosFormateados;
			} else {document.title = "Temporizador";}
		},500);

		if(segundosRestantes==0){
			console.log("Fin")
		}
	}