Mostrando entradas con la etiqueta JavaScript. Mostrar todas las entradas
Mostrando entradas con la etiqueta JavaScript. Mostrar todas las entradas

viernes, 23 de marzo de 2012

Curiosidades - Canvas (HTML)

Hola,

hoy os dejo una entrada diferente. Un enlace a una página en la que puedes interactuar con un código y ver los efectos inmediatamente en una serie de imágenes que puedes elegir. Para ello se ha utilizado el elemento HTML Canvas, que permite la generación de gráficos dinámicamente.

1.- Accede a la web:

2.- Elige el patrón o imagen que prefieras:

3.- Aparece a la izquierda la imagen elegida y a la derecha el código, que puedes modificar a tu gusto:

4.- Una vez realizadas las modificaciones deseadas, puedes exportar la imagen resultante:

Web del autor: http://elucidatedbinary.com/
0 comentarios
Etiquetas: , , ,

miércoles, 5 de octubre de 2011

Multiplicación de matrices con JavaScript

Pues el título lo dice todo. Consiste en realizar un programa en JavaScript que multiplique dos matrices introducidas por el usuario. Para ello, en primer lugar, se piden las dimensiones de dichas matrices, se comprueba que son correctas [(m x n) * (n x p)] y si es así, se crean estas matrices, para que el usuario las rellene y posteriormente calcular su producto, que será otra matriz de dimensiones (m x p).

CÓDIGO HTML: pide las dimensiones de las matrices y ejecuta el código JavaScript

<html>
	<head>
		<script src="js/multiplicar_matrices4.js" language="javascript" type="text/javascript">
		</script>
	</head>
	<body>
		<div id="main" style="width:100%; height:350px">
			<div id="dimens" align="center" style="width:100%; background-color:FFA500">
				<div id="A" align="center" style="float:left; width:50%">
					<div>Dimensiones matriz A</div>
					<form name="dimA">
						Filas
						<input type="text" size="4" id="text">
						Columnas
						<input type="text" size="4" id="text">
					</form>
				</div>
				<div id="B" align="center" style="float:right; width:50%">
					<div>Dimensiones matriz B</div>
					<form name="dimB">
						Filas
						<input type="text" size="4" id="text">
						Columnas
						<input type="text" size="4" id="text">
					</form>
				</div>
				<input type="button" value="CREAR MATRICES" onclick="Comprobar ()" name="crear">
			</div>
	</body>
</html>

CÓDIGO JAVASCRIPT

var matriz1;
var matriz2;
var matrizRes;
var filaA;
var colA;
var filaB;
var colB;
var contador = 0;
//contador cuenta las veces que se accede, para que si no es la primera, se borren las capas creadas previamente.

//FUNCIONCES QUE DEBEMOS DEFINIR PARA CREAR LAS MATRICES
function CreaMatriz(n, m) {
	//DEFINIMOS EL TAMAÑO DE LA MATRIZ
	this.length = n;
	for (var i=0; i<n; i++) {
		this[i] = new Array(m);
	}
	return this;
}

function Multiplicar () {
	Inicializar ()
	for (i=0; i < filaA; i++){
		for (j=0; j < colB; j++){
			for (k=0; k < colA; k++){
				matrizRes[i][j] = matrizRes[i][j] + (matriz1[i][k] * matriz2[k][j]);
			}
		}
	}
}

function Mostrar () {
	Cargar ()
	
	var q = 0;
	
	for (i=0; i < matrizRes.length; i++){
		for (j=0; j < matrizRes.length; j++){
			document.matrizR.elements[q].value = matrizRes[i][j];
			matrizRes[i][j] = 0;
			q++;
		}
	}
}

//Esta función recoge los datos del formulario y los guarda en las matrices
function Cargar () {
	var q = 0;

	for (i=0; i<filaA; i++) {
		for (j=0; j<colA; j++) {
			matriz1[i][j] = parseInt(document.matrizA.elements[q].value);
			q++;
		}
	}
	
	q=0;
	for (i=0; i<filaB; i++) {
		for (j=0; j<colB; j++) {
			matriz2[i][j] = parseInt(document.matrizB.elements[q].value);
			q++;
		}
	}
	
	Multiplicar ()
}

//Comprueba que las dimensiones de las matrices son correctas para poder multiplicarlas
function Comprobar () {
	filaA = parseInt(document.dimA.elements[0].value);
	colA = parseInt(document.dimA.elements[1].value);
	filaB = parseInt(document.dimB.elements[0].value);
	colB = parseInt(document.dimB.elements[1].value);
		
	if (isNaN(filaA) || isNaN(colA) || isNaN(filaB) || isNaN(colB)) {
		alert("Valores no v\u00e1lidos.");
	}
	else if (colA != filaB) {
		alert("Dimensiones de las matrices no v\u00e1lidas.\nEl n\u00famero de columnas de A debe ser\nigual al n\u00famero de filas de B.");
	}
	else {
		if (contador > 0) {
			Borrar ()
		}
		matriz1 = new CreaMatriz(filaA, colA);
		matriz2 = new CreaMatriz(filaB, colB);
		CrearFormularios (filaA, colA, filaB, colB)
		matrizRes = new CreaMatriz(filaA, colB);
		CrearFormRes (filaA, colB)
		contador++
	}
}

function CrearFormularios (filA, colA, filB, colB) {
	var d = document.createElement("DIV");
	var fA = document.createElement("FORM");
	var fB = document.createElement("FORM");
	var A = document.createTextNode("Matriz A");
	var B = document.createTextNode("Matriz B");
	d.setAttribute("id", "matrices");
	d.setAttribute("align", "center");
	d.setAttribute("style", "width: 50%; height: 100%; float: left; background-color: 66FF66");
	fA.setAttribute("name", "matrizA");
	fB.setAttribute("name", "matrizB");
	
	var boton = document.createElement("INPUT");
	boton.setAttribute("type", "button");
	boton.setAttribute("value", "CALCULAR");
	boton.setAttribute("name", "button");
	boton.onclick=function(){Mostrar();}
	
	for (i=0; i<filA; i++) {
		var salto = document.createElement("BR");
		for (j=0; j<colA; j++) {
			var casilla = document.createElement("INPUT");
			casilla.setAttribute("type","text");
			casilla.setAttribute("size","4");
			casilla.setAttribute("name","text");
			fA.appendChild(casilla);
		}
		fA.appendChild(salto);
	}
	for (i=0; i<filB; i++) {
		var salto = document.createElement("BR");
		for (j=0; j<colB; j++) {
			var casilla = document.createElement("INPUT");
			casilla.setAttribute("type","text");
			casilla.setAttribute("size","4");
			casilla.setAttribute("name","text");
			fB.appendChild(casilla);
		}
		fB.appendChild(salto);
	}
	var salto = document.createElement("BR");
	d.appendChild(salto);
	d.appendChild(A);
	d.appendChild(fA);
	d.appendChild(B);
	d.appendChild(fB);
	var salto = document.createElement("BR");
	d.appendChild(salto);
	d.appendChild(boton);
	
	var otro = document.getElementById("main");
	otro.appendChild(d);
}

function CrearFormRes (filaA, colB) {
	var capa = document.createElement("DIV");
	var fRes = document.createElement("FORM");
	var res = document.createTextNode("Matriz Resultante");
	capa.setAttribute("id", "resultado");
	capa.setAttribute("align", "center");
	capa.setAttribute("style", "width: 50%; height: 100%; float:right; background-color: 20B2AA");
	fRes.setAttribute("name", "matrizR");
	
	for (i=0; i<filaA; i++) {
		var salto = document.createElement("BR");
		for (j=0; j<colB; j++) {
			var casilla = document.createElement("INPUT");
			casilla.setAttribute("type","text");
			casilla.setAttribute("size","4");
			casilla.setAttribute("name","text");
			casilla.readOnly ="true";
			fRes.appendChild(casilla);
		}
		fRes.appendChild(salto);
	}
	
	var salto = document.createElement("BR");
	capa.appendChild(salto);
	capa.appendChild(res);
	capa.appendChild(fRes);
	
	var otro = document.getElementById("main");
	otro.appendChild(capa);
}

function Inicializar () {
	for (i=0; i < matrizRes.length; i++){
		for (j=0; j < matrizRes.length; j++){
			matrizRes[i][j] = 0;
		}
	}
}

function Borrar () {
	var capa1 = document.getElementById("matrices");
	var capa2 = document.getElementById("resultado");
	var padre1 = capa1.parentNode;
	var padre2 = capa2.parentNode;
	padre1.removeChild(capa1);
	padre2.removeChild(capa2);
}
11 comentarios
Etiquetas: , , ,

lunes, 19 de septiembre de 2011

Secuencia de imágenes con JavaScript

Dado el siguiente código en JavaScript, correspondiente a una secuencia de imágenes:

var SecuenciaID = null
var imagen = 0
var duracion = 1000
	
{imagenes = new CreaArray(4)
imagenes[1].src = "img/g1.jpg"
imagenes[2].src = "img/g2.png"
imagenes[3].src = "img/g3.jpg"
imagenes[4].src = "img/g4.jpg"
}
		
function CreaArray(n) {
	this.length = n
	for (var i = 1; i<=n; i++) {
		this[i] = new Image()
	}
	return this
}
		
function MostrarSecuencia() {
	{
		document.images["secuencia"].src = imagenes[imagen].src
		imagen++
		if ( imagen == 5 )
			imagen = 1
	}
	SecuenciaID = setTimeout("MostrarSecuencia()", duracion)
	SecuenciaEjecutandose = true
}
		
function IniciarSecuencia() {
	imagen = 1
	MostrarSecuencia()
}

Realizar los siguientes ejercicios:
  1. Conseguir que se muestre la secuencia de imágenes.
  2. Hacer que el tiempo durante el cual se muestra cada imagen sea distinto.
  3. Modificar el tamaño de cada imagen.
  4. Añadir música de fondo (debe estar sonando continuamente).
  5. Hacer que cuando termine la música de fondo, se pare la secuencia de imágenes.
  6. Añadir botones que inicien o paren la secuencia.
NOTA: en los cuatro primero ejercicios, el código JavaScript se añadió directamente dentro del código HTML, pero en los dos últimos, se creó un fichero por separado al que se referenciaba desde la cabecera del HTML.

EJERCICIO 1

<html>
	<script language="javascript" type="text/javascript">
		
		var SecuenciaID = null
		var imagen = 0
		var duracion = 1000
		
		{imagenes = new CreaArray(4)
		imagenes[1].src = "img/g1.jpg"
		imagenes[2].src = "img/g2.png"
		imagenes[3].src = "img/g3.jpg"
		imagenes[4].src = "img/g4.jpg"
		}
		
		function CreaArray(n) {
			this.length = n
			for (var i = 1; i<=n; i++) {
				this[i] = new Image()
			}
			return this
		}
		
		function MostrarSecuencia() {
			{
				document.images["secuencia"].src = imagenes[imagen].src
				imagen++
				if ( imagen == 5 )
					imagen = 1
			}
			SecuenciaID = setTimeout("MostrarSecuencia()", duracion)
			SecuenciaEjecutandose = true
		}
		
		function IniciarSecuencia() {
			imagen = 1
			MostrarSecuencia()
		}
		
	</script>
	
	<body onload="IniciarSecuencia()">
		<p><img src="img/g1.jpg" alt="Secuencia" name="secuencia"></p>
	</body>
</html>

EJERCICIO 2

<html>
	<script language="javascript" type="text/javascript">
		<!-- DECLARACIÓN DE VARIABLES -->
		var SecuenciaID = null
		var imagen = 0
		var tiempo = 1
		
		<!-- ARRAY DE IMÁGENES -->
		{imagenes = new CreaArray(4)
		imagenes[1].src = "img/g1.jpg"
		imagenes[2].src = "img/g2.png"
		imagenes[3].src = "img/g3.jpg"
		imagenes[4].src = "img/g4.jpg"
		}
		
		<!-- ARRAY DE "DURACIONES". Tiempo durante el cual se mostrará cada imagen -->
		{duracion = new CreaArray2(4)
		duracion[1] = 1000
		duracion[2] = 2000
		duracion[3] = 3000
		duracion[4] = 4000
		}
		
		<!-- FUNCIONCES QUE DEBEMOS DEFINIR PARA CREAR LOS ARRAYS -->
		function CreaArray(n) {
			<!-- DEFINIMOS EL TAMAÑO DEL ARRAY -->
			this.length = n
			for (var i = 1; i<=n; i++) {
				this[i] = new Image()
			}
			return this
		}
		
		function CreaArray2(n) {
			this.length = n
			for (var i = 1; i<=n; i++) {
				this[i] = 0
			}
			return this
		}
		
		function MostrarSecuencia() {
			{
				<!-- A TODAS LAS IMÁGENES DE <body> CUYO NOMBRE SEA "Secuencia" -->
				<!-- LE ASIGNAMOS LAS DEL ARRAY -->
				document.images["secuencia"].src = imagenes[imagen].src
				<!-- INCREMENTA EL VALOR DE "imagen" PARA QUE A CADA VUELTA MUESTRE LA -->
				<!-- SIGUIENTE SI LLEGA AL FINAL, COMIENZA POR LA PRIMERA DE NUEVO. -->
				imagen++
				if ( imagen == 5 )
					imagen = 1
			}
			<!-- setTimeout PERMITE EJECUTAR UNA FUNCIÓN PASADO CIERTO TIEMPO. -->
			SecuenciaID = setTimeout("MostrarSecuencia()", duracion[tiempo])
			tiempo++
			if ( tiempo == 5 )
				tiempo = 1
			SecuenciaEjecutandose = true
		}
		
		function IniciarSecuencia() {
			imagen = 1
			MostrarSecuencia()
		}
		
	</script>
	
	<body onload="IniciarSecuencia()">
		<p><img src="img/g1.jpg" alt="Secuencia" name="secuencia"></p>
	</body>
</html>

EJERCICIO 3

<html>
	<script language="javascript" type="text/javascript">
		<!-- DECLARACIÓN DE VARIABLES -->
		var SecuenciaID = null
		var imagen = 0
		var tiempo = 1
		
		<!-- ARRAY DE IMÁGENES -->
		{imagenes = new CreaArray(4)
		imagenes[1].src = "img/g1.jpg"
		imagenes[2].src = "img/g2.png"
		imagenes[3].src = "img/g3.jpg"
		imagenes[4].src = "img/g4.jpg"
		}
		
		<!-- ARRAY DE "DURACIONES". Tiempo durante el cual se mostrará cada imagen -->
		{duracion = new CreaArray2(4)
		duracion[1] = 1000
		duracion[2] = 2000
		duracion[3] = 3000
		duracion[4] = 4000
		}
		
		<!-- ARRAY DE "TAMAÑOS". Tamaño que irá tomando cada imagen -->
		{size = new CreaArray2(4)
		size[1] = 100
		size[2] = 200
		size[3] = 300
		size[4] = 400
		}
		
		<!-- FUNCIONCES QUE DEBEMOS DEFINIR PARA CREAR LOS ARRAYS -->
		function CreaArray(n) {
			<!-- DEFINIMOS EL TAMAÑO DEL ARRAY -->
			this.length = n
			for (var i = 1; i<=n; i++) {
				this[i] = new Image()
			}
			return this
		}
		
		function CreaArray2(n) {
			this.length = n
			for (var i = 1; i<=n; i++) {
				this[i] = 0
			}
			return this
		}
		
		function MostrarSecuencia () {
			{
				<!-- DEFINIR TAMAÑO DE LAS IMÁGENES -->
				document.images["secuencia"].width = size[imagen]
				document.images["secuencia"].height = size[imagen]
				
				<!-- A TODAS LAS IMÁGENES DE <body> CUYO NOMBRE SEA "Secuencia" -->
				<!-- LE ASIGNAMOS LAS DEL ARRAY -->
				document.images["secuencia"].src = imagenes[imagen].src
				<!-- INCREMENTA EL VALOR DE "imagen" PARA QUE A CADA VUELTA MUESTRE LA -->
				<!-- SIGUIENTE SI LLEGA AL FINAL, COMIENZA POR LA PRIMERA DE NUEVO. -->
				imagen++
				if ( imagen == 5 )
					imagen = 1
			}
			<!-- setTimeout PERMITE EJECUTAR UNA FUNCIÓN PASADO CIERTO TIEMPO. -->
			SecuenciaID = setTimeout("MostrarSecuencia()", duracion[tiempo])
			tiempo++
				if ( tiempo == 5 )
					tiempo = 1
			SecuenciaEjecutandose = true
		}
		
		function IniciarSecuencia() {
			imagen = 1
			MostrarSecuencia()
		}
		
	</script>
	
	<body onload="IniciarSecuencia()">
		<p><img src="img/g1.jpg" alt="Secuencia" name="secuencia"></p>
	</body>
</html>

EJERCICIO 4

<html>
	<script language="javascript" type="text/javascript">
		<!-- DECLARACIÓN DE VARIABLES -->
		var SecuenciaID = null
		var imagen = 0
		var tiempo = 1
		
		<!-- ARRAY DE IMÁGENES -->
		{imagenes = new CreaArray(4)
		imagenes[1].src = "img/g1.jpg"
		imagenes[2].src = "img/g2.png"
		imagenes[3].src = "img/g3.jpg"
		imagenes[4].src = "img/g4.jpg"
		}
		
		<!-- ARRAY DE "DURACIONES". Tiempo durante el cual se mostrará cada imagen -->
		{duracion = new CreaArray2(4)
		duracion[1] = 1000
		duracion[2] = 2000
		duracion[3] = 3000
		duracion[4] = 4000
		}
		
		<!-- ARRAY DE "TAMAÑOS". Tamaño que irá tomando cada imagen -->
		{size = new CreaArray2(4)
		size[1] = 100
		size[2] = 200
		size[3] = 300
		size[4] = 400
		}
		
		<!-- FUNCIONCES QUE DEBEMOS DEFINIR PARA CREAR LOS ARRAYS -->
		function CreaArray(n) {
			<!-- DEFINIMOS EL TAMAÑO DEL ARRAY -->
			this.length = n
			for (var i = 1; i<=n; i++) {
				this[i] = new Image()
			}
			return this
		}
		
		function CreaArray2(n) {
			this.length = n
			for (var i = 1; i<=n; i++) {
				this[i] = 0
			}
			return this
		}
		
		function MostrarSecuencia () {
			{
				<!-- DEFINIR TAMAÑO DE LAS IMÁGENES -->
				document.images["secuencia"].width = size[imagen]
				document.images["secuencia"].height = size[imagen]
				
				<!-- A TODAS LAS IMÁGENES DE <body> CUYO NOMBRE SEA "Secuencia" -->
				<!-- LE ASIGNAMOS LAS DEL ARRAY -->
				document.images["secuencia"].src = imagenes[imagen].src
				<!-- INCREMENTA EL VALOR DE "imagen" PARA QUE A CADA VUELTA MUESTRE LA -->
				<!-- SIGUIENTE SI LLEGA AL FINAL, COMIENZA POR LA PRIMERA DE NUEVO. -->
				imagen++
				if ( imagen == 5 )
					imagen = 1
			}
			<!-- setTimeout PERMITE EJECUTAR UNA FUNCIÓN PASADO CIERTO TIEMPO. -->
			SecuenciaID = setTimeout("MostrarSecuencia()", duracion[tiempo])
			tiempo++
				if ( tiempo == 5 )
					tiempo = 1
			SecuenciaEjecutandose = true
		}
		
		function IniciarSecuencia() {
			imagen = 1
			MostrarSecuencia()
		}
		
	</script>
	
	<body onload="IniciarSecuencia()">
		<div id="1">
			<p><img src="img/g1.jpg" alt="Secuencia" name="secuencia"></p>
		</div>
		<div id="2" style="position:absolute; top:300;">
			<EMBED src="sound/summer.mp3" autostart="true" loop="true">
		</div>
	</body>
</html>

EJERCICIO 5

Fichero .js
//DECLARACIÓN DE VARIABLES
var SecuenciaID = null
var imagen = 0
var tiempo = 1
var cancion = 0
		
//ARRAY DE IMÁGENES
{imagenes = new CreaArray(4)
imagenes[1].src = "img/g1.jpg"
imagenes[2].src = "img/g2.png"
imagenes[3].src = "img/g3.jpg"
imagenes[4].src = "img/g4.jpg"
}
		
//ARRAY DE "DURACIONES". Tiempo durante el cual se mostrará cada imagen
{duracion = new CreaArray2(4)
duracion[1] = 1000
duracion[2] = 2000
duracion[3] = 3000
duracion[4] = 4000
}
		
//ARRAY DE "TAMAÑOS". Tamaño que irá tomando cada imagen
{size = new CreaArray2(4)
size[1] = 100
size[2] = 200
size[3] = 300
size[4] = 400
}
		
//FUNCIONCES QUE DEBEMOS DEFINIR PARA CREAR LOS ARRAYS
function CreaArray(n) {
	//DEFINIMOS EL TAMAÑO DEL ARRAY
	this.length = n
	for (var i = 1; i<=n; i++) {
		this[i] = new Image()
	}
	return this
}
		
function CreaArray2(n) {
	this.length = n
	for (var i = 1; i<=n; i++) {
		this[i] = 0
	}
	return this
}
		
function MostrarSecuencia () {
	{
	//DEFINIR TAMAÑO DE LAS IMÁGENES
	document.images["secuencia"].width = size[imagen]
	document.images["secuencia"].height = size[imagen]
		
	//A TODAS LAS IMÁGENES DE <body> CUYO NOMBRE SEA "Secuencia"
	//LE ASIGNAMOS LAS DEL ARRAY
	document.images["secuencia"].src = imagenes[imagen].src
	//INCREMENTA EL VALOR DE "imagen" PARA QUE A CADA VUELTA MUESTRE LA
	//SIGUIENTE SI LLEGA AL FINAL, COMIENZA POR LA PRIMERA DE NUEVO.
	imagen ++
		if ( imagen == 5 )
			imagen = 1
	}
				
	cancion = cancion + duracion[tiempo]
			
	if ( cancion <= 60000 ) {
		//setTimeout PERMITE EJECUTAR UNA FUNCIÓN PASADO CIERTO TIEMPO.
		SecuenciaID = setTimeout("MostrarSecuencia()", duracion[tiempo])
			
		tiempo ++
			if ( tiempo == 5 )
				tiempo = 1
	}
}
		
function IniciarSecuencia() {
	imagen = 1
	MostrarSecuencia()
}

Fichero .html
<html>
	<head>
		<script src="js/secuencia.js" language="javascript" type="text/javascript">
		</script>
	</head>

	<body onload="IniciarSecuencia()">
		<p><img src="img/g1.jpg" alt="Secuencia" name="secuencia"></p>
		<EMBED src="sound/summer.mp3" autostart="true" loop="false" hidden="yes">

	</body>
</html>

EJERCICIO 6

Fichero .js
//DECLARACIÓN DE VARIABLES
var SecuenciaID = null
var SecuenciaEjecutandose = null
var imagen = 1
//Inicialmente imagen vale 1 y eliminamos la función IniciarSecuencia
var tiempo = 1
		
//ARRAY DE IMÁGENES
{imagenes = new CreaArray(4)
imagenes[1].src = "img/g1.jpg"
imagenes[2].src = "img/g2.png"
imagenes[3].src = "img/g3.jpg"
imagenes[4].src = "img/g4.jpg"
}
	
//ARRAY DE "DURACIONES". Tiempo durante el cual se mostrará cada imagen
{duracion = new CreaArray2(4)
duracion[1] = 1000
duracion[2] = 2000
duracion[3] = 3000
duracion[4] = 4000
}
		
//ARRAY DE "TAMAÑOS". Tamaño que irá tomando cada imagen
{size = new CreaArray2(4)
size[1] = 100
size[2] = 200
size[3] = 300
size[4] = 400
}
		
//FUNCIONCES QUE DEBEMOS DEFINIR PARA CREAR LOS ARRAYS
function CreaArray(n) {
	//DEFINIMOS EL TAMAÑO DEL ARRAY
	this.length = n
	for (var i = 1; i<=n; i++) {
		this[i] = new Image()
	}
	return this
}
		
function CreaArray2(n) {
	this.length = n
	for (var i = 1; i<=n; i++) {
		this[i] = 0
	}
	return this
}
		
function MostrarSecuencia () {
	if ( SecuenciaEjecutandose == true ) {
		//DEFINIR TAMAÑO DE LAS IMÁGENES
		document.images["secuencia"].width = size[imagen]
		document.images["secuencia"].height = size[imagen]
				
		//A TODAS LAS IMÁGENES DE <body> CUYO NOMBRE SEA "Secuencia"
		//LE ASIGNAMOS LAS DEL ARRAY
		document.images["secuencia"].src = imagenes[imagen].src
		//INCREMENTA EL VALOR DE "imagen" PARA QUE A CADA VUELTA MUESTRE LA
		//SIGUIENTE. SI LLEGA AL FINAL, COMIENZA POR LA PRIMERA DE NUEVO.
		imagen ++
		if ( imagen == 5 )
			imagen = 1
				
	//setTimeout PERMITE EJECUTAR UNA FUNCIÓN PASADO CIERTO TIEMPO.
	SecuenciaID = setTimeout("MostrarSecuencia()", duracion[tiempo])
		
	tiempo ++
	if ( tiempo == 5 )
		tiempo = 1
	}
			
}
		
function Iniciar () {
	SecuenciaEjecutandose = true
	MostrarSecuencia()
}
	
function Parar () {
	SecuenciaEjecutandose = false
	MostrarSecuencia()
}

Fichero .html
<html>
	<head>
		<script src="js/secuenciaConBotones.js" language="javascript" type="text/javascript">
		</script>
	</head>
	
	<body>
		<p><img src="img/g1.jpg" alt="Secuencia" name="secuencia"></p>
		<EMBED src="sound/summer.mp3" autostart="true" loop="true" hidden="yes">
		<input type="button" value="Iniciar secuencia" onClick="Iniciar()" style="position:absolute; left:500; top:50">
		<input type="button" value="Parar secuencia" onClick="Parar()" style="position:absolute; left:500; top:150">
	</body>
</html>
14 comentarios
Etiquetas: , , ,
Suscribirse a: Entradas (Atom)