JavaScript - Script de setInterval (Si, todavia)

Script de setInterval (Si, todavia)

Publicado por Alejandro (14 intervenciones) el 19/08/2019 17:52:46

Consegui hacer un avance, pero el set interval solo se aplica a una imagen (como si solo pudiese ejecutar una funcion). ¿Alguna pista?

<html>

<head>

<TITLE>Actividad 6.1</TITLE>

</head>

<body onload="arriba()">

<SCRIPT languaje="JavaScript">

var im1 = document.getElementById("un");

var primer = new Array("1.png","a.png");

var cp=0;

var im2 = document.getElementById("do");

var segundo = new Array("2.png","a.png");

var cs=0;

var im3 = document.getElementById("te");

var tercero = new Array("3.png","a.png");

var ct=0;

function cuatro() {document.getElementById('cu').src = "7.png";}

function cinco() {document.getElementById('ci').src = "7.png";}

function seis() {document.getElementById('se').src = "7.png";}

function cuatros() {document.getElementById('cu').src = "4.png";}

function cincos() {document.getElementById('ci').src = "5.png";}

function seiss() {document.getElementById('se').src = "6.png";}

var F;

var S;

var T;

function arriba() {

F = setInterval(first, 2000);

S = setInterval(sec, 2000);

T = setInterval(thir, 2000);

function first()

{document["un"].src = primer[cp]; cp++; if(cp>=primer.length) { cp=0;};}

function sec()

{document["do"].src = segundo[cp]; cp++; if(cp>=segundo.length) { cp=0;};}

function thir()

{document["te"].src = tercero[cp]; cp++; if(cp>=tercero.length) { cp=0;};}

//function third()

//{document["te"].src = tercero[cont]; cont++; if(cont>=tercero.length) { cont=0;};}

//setInterval("first()", 2000);

</script>

<TABLE BORDER=1><TR><TD><IMG src="1.png" width="100" height="100" border="0" id="un" name="im1"></TD><TD><IMG src="2.png" width="100" height="100" border="0" id="do"></TD><TD><IMG src="3.png" width="100" height="100" border="0" id="te"></TD></TR>

<TR><TD><IMG onmouseover="cuatro(this)" onmouseout="cuatros(this)" src="4.png" width="100" height="100" border="0" id="cu"></TD><TD><IMG onmouseover="cinco(this)" onmouseout="cincos(this)" src="5.png" width="100" height="100" border="0" id="ci"></TD><TD><IMG onmouseover="seis(this)" onmouseout="seiss(this)" src="6.png" width="100" height="100" border="0" id="se"></TD></TR>

</TABLE>

</body>

</html>

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 6

Val: 1.448

Script de setInterval (Si, todavia)

Publicado por Alejandro (532 intervenciones) el 20/08/2019 18:31:43

Alejandro se encuentra ahora conectado en el
chat de PHP

Una pista de que pretendes es lo que deberías de darnos ¬_¬

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Script de setInterval (Si, todavia)

Publicado por Alejandro (14 intervenciones) el 21/08/2019 09:44:08

En la parte de arriba de la tabla hay 3 imagenes, tienen que cambiar a otra imagen cada 2 segundos. Probe varias maneras de hacerlo pero el set interval solo funciona con la primera imagen.

Valora esta respuesta

Comentar

Pos: 1

Val: 3.506

Script de setInterval (Si, todavia)

Publicado por joel (895 intervenciones) el 21/08/2019 15:07:25

Aquí tienes un ejemplo de como hacerlo de varias maneras.
https://www.lawebdelprogramador.com/codigo/JavaScript/2654-Cambiar-la-imagen-cada-5-segundos.html

Valora esta respuesta

Comentar

Script de setInterval (Si, todavia)

Publicado por Alejandro (14 intervenciones) el 28/08/2019 12:29:08

Bueno, esto es un avance en el que ya cambian las tres imagenes de arriba, faltaria hacer que al pulsar una tecla salga un alert que
pare el movimiento de las imagenes y que al pulsar aceptar se vuelvan a mover otra vez.

<html>

<head>

<TITLE>Actividad 6.1</TITLE>

</head>

<body>

<SCRIPT languaje="JavaScript">

var cont = 0;

var im1 = document.getElementById("un");

var primer = new Array("1.png","a.png");

var im2 = document.getElementById("do");

var segundo = new Array("2.png","a.png");

var im3 = document.getElementById("te");

var tercero = new Array("3.png","a.png");

function cuatro() {document.getElementById('cu').src = "7.png";}

function cinco() {document.getElementById('ci').src = "7.png";}

function seis() {document.getElementById('se').src = "7.png";}

function cuatros() {document.getElementById('cu').src = "4.png";}

function cincos() {document.getElementById('ci').src = "5.png";}

function seiss() {document.getElementById('se').src = "6.png";}

//function first()

//{document["un"].src = primer[cont]; cont++; if(cont>=primer.length) { cont=0;};}

function first(){

if (cont==0) {document.getElementById('un').src = "1.png"; document.getElementById('do').src = "2.png"; document.getElementById('te').src = "3.png"; cont++;}

else {document.getElementById('un').src = "a.png"; document.getElementById('do').src = "a.png" ; document.getElementById('te').src = "a.png" ; cont-- ;};}

//{document["te"].src = tercero[cont]; cont++; if(cont>=tercero.length) { cont=0;};}

window.setInterval("first()", 2000);

</script>

<TABLE BORDER=1><TR><TD><IMG src="1.png" width="100" height="100" border="0" id="un" name="im1"></TD><TD><IMG src="2.png" width="100" height="100" border="0" id="do"></TD><TD><IMG src="3.png" width="100" height="100" border="0" id="te"></TD></TR>

<TR><TD><IMG onmouseover="cuatro(this)" onmouseout="cuatros(this)" src="4.png" width="100" height="100" border="0" id="cu"></TD><TD><IMG onmouseover="cinco(this)" onmouseout="cincos(this)" src="5.png" width="100" height="100" border="0" id="ci"></TD><TD><IMG onmouseover="seis(this)" onmouseout="seiss(this)" src="6.png" width="100" height="100" border="0" id="se"></TD></TR>

</TABLE>

</body>

</html>

Valora esta respuesta

Comentar

Pos: 1

Val: 3.506

Script de setInterval (Si, todavia)

Publicado por joel (895 intervenciones) el 28/08/2019 20:41:41

Es muy difícil de leer este código sin tabular y todo juntado en una linea!!!

Valora esta respuesta

Comentar

Script de setInterval (Si, todavia)

Publicado por Alejandro (14 intervenciones) el 30/08/2019 14:09:05

Vale, una explicacion mas a detalle.
Las variables del principio estaban mas relacionadas con los primeros intentos del script, donde el set interval funcionaba solo con la primera imagen y no con las otras dos.
Por ahora solo se tiene que tener en cuenta la variable contador, en su defecto esta en 0.
La funcion que se ejecuta cada dos segundos con setinterval es esta.

function first(){

En lo que seria la primera linea con el if ,mira si cont esta en 0, si esta en 0 muestra las primeras imagenes de la tabla (vamos las tres de arriba) y suma 1 con cont**.

if (cont==0) {document.getElementById('un').src = "1.png"; document.getElementById('do').src = "2.png"; document.getElementById('te').src = "3.png"; cont++;}

Cuando contador es 1 cambia a la otra imagen y resta con cont-- para que sea 0 otra vez.

else {document.getElementById('un').src = "a.png"; document.getElementById('do').src = "a.png" ; document.getElementById('te').src = "a.png" ; cont-- ;};}

Es un codigo muy comprimido y exagerado pero como funciona lo deje asi.
Esta es la parte del codigo que ya estaba resuelta, no necesito ayuda hay pero igualmente la explico.

Esta hace que las tres imagenes de abajo se cambie por otra con onmouseover=(this).

function cuatro() {document.getElementById('cu').src = "7.png";}

function cinco() {document.getElementById('ci').src = "7.png";}

function seis() {document.getElementById('se').src = "7.png";}

Con onmouseout=(this) y estas funciones cambia a las de antes.

function cuatros() {document.getElementById('cu').src = "4.png";}

function cincos() {document.getElementById('ci').src = "5.png";}

function seiss() {document.getElementById('se').src = "6.png";}

Con esto ya seria todo lo interesante del codigo, me faltaria hacer un clearInterval al pulsar cualquier tecla, que hace que salga un alert con un boton de aceptar que al pulsarlo vuelve a ejecutar el script.

Valora esta respuesta

Comentar

alert y prompt se ejecutan antes de tiempo

Audio Files