Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Hacer que una imagen aparezca y desaparezca a los pocos segundos en Javascript

JavaScript - Hacer que una imagen aparezca y desaparezca a los pocos segundos en Javascript

Volver
Nuevo Tema
<<>>
 
Vista:

Hacer que una imagen aparezca y desaparezca a los pocos segundos en Javascript

Publicado por Cris (1 intervención) el 18/10/2019 14:19:32
Estoy intentando hacer el típico juego del topo. Tengo una tabla que cada cierto tiempo me aparece un topo de forma random. Tengo definido que cada 2 segundos cambie de casilla pero el problema es que si por casualidad me aparece dos veces seguidas el mismo numero, la imagen permanece durante 4 segundos. Lo que quiero es que entre numero y numero la tabla aparezca en blanco (sin ningún topo).

A continuación os dejo el código de javascript:
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
function automatic(){
setInterval(random, 2000)}
 
function random(){
var numero=Math.round(Math.random()*8+1);
console.log(numero)
if (numero == 1){
		document.getElementById("1").style.display = "block";
		document.getElementById("2").style.display = "none";
		document.getElementById("3").style.display = "none";
		document.getElementById("4").style.display = "none";
		document.getElementById("5").style.display = "none";
		document.getElementById("6").style.display = "none";
		document.getElementById("7").style.display = "none";
		document.getElementById("8").style.display = "none";
		document.getElementById("9").style.display = "none";
	}
	if (numero == 2){
		document.getElementById("1").style.display = "none";
		document.getElementById("2").style.display = "block";
		document.getElementById("3").style.display = "none";
		document.getElementById("4").style.display = "none";
		document.getElementById("5").style.display = "none";
		document.getElementById("6").style.display = "none";
		document.getElementById("7").style.display = "none";
		document.getElementById("8").style.display = "none";
		document.getElementById("9").style.display = "none";
	}
	if (numero == 3){
		document.getElementById("1").style.display = "none";
		document.getElementById("2").style.display = "none";
		document.getElementById("3").style.display = "block";
		document.getElementById("4").style.display = "none";
		document.getElementById("5").style.display = "none";
		document.getElementById("6").style.display = "none";
		document.getElementById("7").style.display = "none";
		document.getElementById("8").style.display = "none";
		document.getElementById("9").style.display = "none";
	}
	if (numero == 4){
		document.getElementById("1").style.display = "none";
		document.getElementById("2").style.display = "none";
		document.getElementById("3").style.display = "none";
		document.getElementById("4").style.display = "block";
		document.getElementById("5").style.display = "none";
		document.getElementById("6").style.display = "none";
		document.getElementById("7").style.display = "none";
		document.getElementById("8").style.display = "none";
		document.getElementById("9").style.display = "none";
	}
	if (numero == 5){
		document.getElementById("1").style.display = "none";
		document.getElementById("2").style.display = "none";
		document.getElementById("3").style.display = "none";
		document.getElementById("4").style.display = "none";
		document.getElementById("5").style.display = "block";
		document.getElementById("6").style.display = "none";
		document.getElementById("7").style.display = "none";
		document.getElementById("8").style.display = "none";
		document.getElementById("9").style.display = "none";
	}
	if (numero == 6){
		document.getElementById("1").style.display = "none";
		document.getElementById("2").style.display = "none";
		document.getElementById("3").style.display = "none";
		document.getElementById("4").style.display = "none";
		document.getElementById("5").style.display = "none";
		document.getElementById("6").style.display = "block";
		document.getElementById("7").style.display = "none";
		document.getElementById("8").style.display = "none";
		document.getElementById("9").style.display = "none";
	}
 
	if (numero == 7){
		document.getElementById("1").style.display = "none";
		document.getElementById("2").style.display = "none";
		document.getElementById("3").style.display = "none";
		document.getElementById("4").style.display = "none";
		document.getElementById("5").style.display = "none";
		document.getElementById("6").style.display = "none";
		//document.getElementById("7").style.display = "block";

		document.getElementById("8").style.display = "none";
		document.getElementById("9").style.display = "none";
	}
	if (numero == 8){
		document.getElementById("1").style.display = "none";
		document.getElementById("2").style.display = "none";
		document.getElementById("3").style.display = "none";
		document.getElementById("4").style.display = "none";
		document.getElementById("5").style.display = "none";
		document.getElementById("6").style.display = "none";
		document.getElementById("7").style.display = "none";
		document.getElementById("8").style.display = "block";
		document.getElementById("9").style.display = "none";
	}
	if (numero == 9){
		document.getElementById("1").style.display = "none";
		document.getElementById("2").style.display = "none";
		document.getElementById("3").style.display = "none";
		document.getElementById("4").style.display = "none";
		document.getElementById("5").style.display = "none";
		document.getElementById("6").style.display = "none";
		document.getElementById("7").style.display = "none";
		document.getElementById("8").style.display = "none";
		document.getElementById("9").style.display = "block";
	}
}


NOTA: se trata de un ejercicio para clase y una condición es que sea todo hecho con Javascript (no jquery)
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Hacer que una imagen aparezca y desaparezca a los pocos segundos en Javascript

Publicado por Alejandro (532 intervenciones) el 18/10/2019 15:55:33
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
Empecemos por reducir tu código.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function automatic(){
	setInterval(random, 2000)
}
 
function random(){
	var numero=Math.round(Math.random()*8+1);
 
	for(i=1; i<=9; i++){
		document.getElementById(i).style.display = "none";
	}
 
	function setTimeout(
		function(){
			document.getElementById(numero).style.display = "block";
		},
		500
	);
}

Ahora si, como funciona
El for oculta a todos los topos al ejecutar random().
El setTimeout espera medio segundo para mostrar al topo aleatorio.

Como nota, es buena practica usar nombres de id, variable, etc. relacionados a su referencia.
1
2
document.getElementById('imgTopo1').style.display = "none";
document.getElementById('imgTopo2').style.display = "none";

En tus lineas no se sabe que es el id 1
1
document.getElementById("1").style.display = "none";
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar