Foros del Web » Programando para Internet » Javascript »

Semaforo Script

Estas en el tema de Semaforo Script en el foro de Javascript en Foros del Web. hola y buenas de nuevo os cuento Queria hacer un semaforo que cuando pinchase un boton se pusiera rojo lo pulso de nuevo y se ...
  #1 (permalink)  
Antiguo 01/12/2012, 07:28
 
Fecha de Ingreso: noviembre-2012
Mensajes: 53
Antigüedad: 11 años, 5 meses
Puntos: 1
Exclamación Semaforo Script

hola y buenas de nuevo os cuento

Queria hacer un semaforo que cuando pinchase un boton se pusiera rojo lo pulso de nuevo y se pone amarillo lo pulso de nuevo y se pone verde y lo pulso de nuevo y se pone rojo y vuelta a empezar

yo habia pensado en este codigo pero no se por que no funciona:

Código:
		function semaforo()
		{
		
		var variable1=document.getElementById('arriba')
		var variable2=document.getElementById('medio')
		var variable3=document.getElementById('abajo')
		if (variable2.src.match("semaforo_apagado.png") && variable3.src.match("semaforo_apagado.png"))
		{
		variable1.src="semaforo_rojo.png";
		}
		else if (variable1.src.match("semaforo_rojo.png"))
		{
		variable2.src="semaforo_amarillo.png";
		}
		else
		{
		}
		
		}
ese es el codigo de la función y este el de la pagina completa
Código:
<html>
	<head>
		<title>ejercicio avanzado</title>
	</head>
		<script>
		function semaforo()
		{
		
		var variable1=document.getElementById('arriba')
		var variable2=document.getElementById('medio')
		var variable3=document.getElementById('abajo')
		if (variable2.src.match("semaforo_apagado.png") && variable3.src.match("semaforo_apagado.png"))
		{
		variable1.src="semaforo_rojo.png";
		}
		else if (variable1.src.match("semaforo_rojo.png"))
		{
		variable2.src="semaforo_amarillo.png";
		}
		else
		{
		}
		
		}
		
		
		
		</script>
		
		<body>
		<center>

		<img id="arriba" src="semaforo_apagado.png" width="190" height="190"></img>
<br/>
		<img id="medio" src="semaforo_apagado.png" width="190" height="190"></img>
<br/>
		<img id="abajo" src="semaforo_apagado.png" width="190" height="190"></img>
<br/>
		<button onclick="semaforo()">cambiar semaforo</button>
		</center>
		</body>
</html>
El semaforo se pone en rojo una vez que pincho en el boton pero pincho de nuevo y no se pone en amarillo. por que le digo si estan apagados las dos imagenes de abajo la de arriba se pone roja vale y luego le digo si la imagen de arriba está roja la del medio se pone amarilla pero eso no lo hace ;(
*posdata son tres imagenes una encima de la otra simulando un semaforo

aqui la imagen de la pagina

[url=http://es.zimagez.com/zimage/semaforoapagao.php][img]http://es.zimagez.com/miniature/semaforoapagao.bmp[/img][/url]
[url=http://es.zimagez.com/zimage/semaforoapagao.php]apagado[/url]
http://es.zimagez.com/zimage/semaforoapagao.php

aqui cuando le doy al boton y se pone rojo:

[url=http://es.zimagez.com/zimage/semaforoencendio.php][img]http://es.zimagez.com/miniature/semaforoencendio.bmp[/img][/url]
[url=http://es.zimagez.com/zimage/semaforoencendio.php][/url]
http://es.zimagez.com/zimage/semaforoencendio.php


lo malo es que al seguir dandole no cambia a amarillo por eso no he hecho el verde por que primero tiene que pasar a amarillo

Última edición por ricardojara; 01/12/2012 a las 07:35
  #2 (permalink)  
Antiguo 01/12/2012, 07:49
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Semaforo Script

puedes mostrar y ocultar las imágenes o cambiar el src de una sola imagen
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CARATULAS DE PELÍCULAS</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}

html, body {
width: 100%;
height: 100%;
}


#bloque {
display: block;
width: 100%;
min-height: 100%;
height: auto !important;
background-color: green;
}
</style>
<script type="text/javascript">

var arrcolor = ['green', 'yellow', 'red'];
var counter = 1;
function semaforo() {
document.getElementById('bloque').style.background Color = arrcolor[counter % arrcolor.length];
counter++;
}

</script>
</head>
<body>

<div id="bloque">

</div>

<button onclick="semaforo()">cambiar semaforo</button>

</body>
</html>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 01/12/2012, 08:00
 
Fecha de Ingreso: noviembre-2012
Mensajes: 53
Antigüedad: 11 años, 5 meses
Puntos: 1
Respuesta: Semaforo Script

gracias pero yo quisiera saber que esta mal de mi codigo para cambiarlo
  #4 (permalink)  
Antiguo 01/12/2012, 08:01
Avatar de Gustavo72  
Fecha de Ingreso: abril-2008
Ubicación: -32.956045,-60.661355
Mensajes: 197
Antigüedad: 16 años
Puntos: 9
Respuesta: Semaforo Script

Yo lo haría así:

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <title>ejercicio avanzado</title>
  3. var sem=2;
  4. function semaforo() {
  5.   sem++;
  6.   if (sem>2)
  7.     sem=0;
  8.        
  9.   document.getElementById('arriba').src=(sem==2 ? 'semaforo_rojo.png' : 'semaforo_apagado.png');
  10.   document.getElementById('medio').src=(sem==1 ? 'semaforo_amarillo.png' : 'semaforo_apagado.png');
  11.   document.getElementById('medio').src=(sem==0 ? 'semaforo_verde.png' : 'semaforo_apagado.png');
  12. }
  13. </head>
  14. <div style="text-align: center;">
  15. <img id="arriba" src="semaforo_apagado.png" width="190" height="190"><br/>
  16. <img id="medio" src="semaforo_apagado.png" width="190" height="190"><br/>
  17. <img id="abajo" src="semaforo_apagado.png" width="190" height="190"><br/>
  18. <button onclick="semaforo()">cambiar semaforo</button>
  19. </div>
  20. </body>
  21. </html>
__________________
Saludos.

Gustavo
  #5 (permalink)  
Antiguo 01/12/2012, 08:07
Avatar de Gustavo72  
Fecha de Ingreso: abril-2008
Ubicación: -32.956045,-60.661355
Mensajes: 197
Antigüedad: 16 años
Puntos: 9
Respuesta: Semaforo Script

Cita:
Iniciado por ricardojara Ver Mensaje
gracias pero yo quisiera saber que esta mal de mi codigo para cambiarlo
El problema en tu código que tanto para el primer click como para el segundo se cumple la condición del if:
Código Javascript:
Ver original
  1. if (variable2.src.match("semaforo_apagado.png") && variable3.src.match("semaforo_apagado.png"))

Es decir siempre pone el semáforo a rojo!
__________________
Saludos.

Gustavo
  #6 (permalink)  
Antiguo 01/12/2012, 08:10
 
Fecha de Ingreso: noviembre-2012
Mensajes: 53
Antigüedad: 11 años, 5 meses
Puntos: 1
Respuesta: Semaforo Script

um ese codigo está bien pero se salta el amarillo y se apaga antes de cambiar de color y tienes que darle otra vez
  #7 (permalink)  
Antiguo 01/12/2012, 08:11
 
Fecha de Ingreso: noviembre-2012
Mensajes: 53
Antigüedad: 11 años, 5 meses
Puntos: 1
Respuesta: Semaforo Script

Pues ahora probe con esto aunque tampoco me funciona no se por que ;(

Cita:
function semaforo()
{

var variable1=document.getElementById('arriba')
var variable2=document.getElementById('medio')
var variable3=document.getElementById('abajo')
if (variable2.src.match("semaforo_apagado.png") && variable3.src.match("semaforo_apagado.png") && variable1.src.match("semaforo_apagado.png"))
{
variable1.src="semaforo_rojo.png";
}
else if (variable1.src.match("semaforo_rojo.png"))
{
variable2.src="semaforo_amarillo.png";
variable1.src="semaforo_apagado";
}
else
{
}
}



</script>

Última edición por ricardojara; 01/12/2012 a las 08:22
  #8 (permalink)  
Antiguo 01/12/2012, 08:28
 
Fecha de Ingreso: noviembre-2012
Mensajes: 53
Antigüedad: 11 años, 5 meses
Puntos: 1
Respuesta: Semaforo Script

bueno aqui esta el codigo la versión definitiva espero que hayamos aprendido algo todos yo si me costo pero al fin lo he conseguido

Cita:
<html>
<head>
<title>ejercicio avanzado</title>
</head>
<script>
function semaforo()
{

var variable1=document.getElementById('arriba')
var variable2=document.getElementById('medio')
var variable3=document.getElementById('abajo')
if (variable2.src.match("semaforo_apagado.png") && variable1.src.match("semaforo_apagado.png"))
{
variable1.src="semaforo_rojo.png";
variable3.src="semaforo_apagado.png";
}
else if (variable1.src.match("semaforo_rojo.png"))
{
variable2.src="semaforo_amarillo.png";
variable1.src="semaforo_apagado.png";
}
else if (variable2.src.match("semaforo_amarillo.png"))
{
variable3.src="semaforo_verde.png";
variable2.src="semaforo_apagado.png";
}
{
}
}



</script>

<body>
<center>

<img id="arriba" src="semaforo_apagado.png" width="190" height="190"></img>
<br/>
<img id="medio" src="semaforo_apagado.png" width="190" height="190"></img>
<br/>
<img id="abajo" src="semaforo_apagado.png" width="190" height="190"></img>
<br/>
<button onclick="semaforo()">cambiar semaforo</button>
</center>

</body>
</html>
  #9 (permalink)  
Antiguo 01/12/2012, 08:51
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Semaforo Script

un ejemplo mas didáctico no te pueda ofrecer
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.bloque {
display: block;
width: 100px;
height: 100px;
background-color: grey;
}
</style>
<script type="text/javascript">

var arrcolor = ['green', 'yellow', 'red'];
var counter = 0;
function semaforo() {
document.getElementById('b'+counter % arrcolor.length).style.backgroundColor = arrcolor[counter % arrcolor.length];

if (counter % arrcolor.length != 0 || (counter-1) % arrcolor.length == 2) {
document.getElementById('b'+(counter-1) % arrcolor.length).style.backgroundColor = 'grey';
}

counter++;
}

</script>
</head>
<body>

<div class="bloque" id="b0"></div>
<div class="bloque" id="b1"></div>
<div class="bloque" id="b2"></div>


<button onclick="semaforo()">cambiar semaforo</button>


</body>
</html>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #10 (permalink)  
Antiguo 01/12/2012, 09:09
 
Fecha de Ingreso: noviembre-2012
Mensajes: 53
Antigüedad: 11 años, 5 meses
Puntos: 1
Respuesta: Semaforo Script

Lo de antes ya está resulto lo que pasa es que ahora iba ha hacerlo que cuando pasase el mouse por una imagen está se encendiera y bien eso sabia hacerlo con una imagen en toda la web pero al estar 3 imagenes (el semaforo) no se por que pero da fallo

aqui os pongo el codigo que intente
Cita:
<html>
<head>
<title>ejercicio avanzado 2</title>
</head>
<script>
function semaforo1()
{
var variable1=document.getElementById('arriba')
if (variable1.src.match("semaforo_rojo.png"))
{
variable1.src="semaforo_apagado.png";
}
else
{
variable1.src="semaforo_rojo.png";
}
}

function semaforo2()
{
var variable2=document.getElementById('medio')
if (variable2.src.match("semaforo_amarillo.png"))
{
variable2.src="semaforo_apagado.png";
}
else
{
variable2.src="semaforo_amarillo.png";
}
}

function semaforo3()
if (variable2.src.match("semaforo_verde.png"))
{
{
variable2.src="semaforo_apagado.png";
}
else
{
variable2.src="semaforo_verde.png";
}
}

</script>

<body>
<center>

<img id="arriba" onMouseOver="semaforo1()" onMouseOut="semaforo1()" src="semaforo_apagado.png" width="190" height="190"></img>
<br/>
<img id="medio" onMouseOver="semaforo2()" onMouseOut="semaforo2()" src="semaforo_apagado.png" width="190" height="190" onMouseOver="semaforo2()"></img>
<br/>
<img id="abajo" onMouseOver="semaforo3()" onMouseOut="semaforo3()" src="semaforo_apagado.png" width="190" height="190" onMouseOver="semaforo3()"></img>
<br/>

</center>

</body>
</html>
me da fallo cuando pongo los tres cuando pongo solo una imagen no no se por que
  #11 (permalink)  
Antiguo 01/12/2012, 09:30
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Semaforo Script

el código que te he facilitado es el que has de usar. en lugar de cambiar el fondo de los bloques, cambias el src de las imágenes

por mi parte ya te he dado las indicaciones para que puedas hacerlo. otra cosa es que hagas oídos sordos
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #12 (permalink)  
Antiguo 02/12/2012, 07:04
 
Fecha de Ingreso: noviembre-2012
Mensajes: 53
Antigüedad: 11 años, 5 meses
Puntos: 1
Respuesta: Semaforo Script

Vale para hacer que el semaforo cambie cuando pasas el mouse por el este es el codigo:
Cita:
<html>
<head>
<title>ejercicio avanzado 2</title>
</head>
<script>
function semaforo1()
{
var variable1=document.getElementById('arriba')
if (variable1.src.match("semaforo_rojo.png"))
{
variable1.src="semaforo_apagado.png";
}
else
{
variable1.src="semaforo_rojo.png";
}
}

function semaforo2()
{
var variable2=document.getElementById('medio')
if (variable2.src.match("semaforo_amarillo.png"))
{
variable2.src="semaforo_apagado.png";
}
else
{
variable2.src="semaforo_amarillo.png";
}
}

function semaforo3()
{
var variable3=document.getElementById('abajo')
if (variable3.src.match("semaforo_verde.png"))
{
variable3.src="semaforo_apagado.png";
}
else
{
variable3.src="semaforo_verde.png";
}
}

</script>

<body>
<center>

<img id="arriba" onMouseOver="semaforo1()" onMouseOut="semaforo1()" src="semaforo_apagado.png" width="190" height="190"></img>
<br/>
<img id="medio" onMouseOver="semaforo2()" onMouseOut="semaforo2()" src="semaforo_apagado.png" width="190" height="190" onMouseOver="semaforo2()"></img>
<br/>
<img id="abajo" onMouseOver="semaforo3()" onMouseOut="semaforo3()" src="semaforo_apagado.png" width="190" height="190" onMouseOver="semaforo3()"></img>
<br/>

</center>

</body>
</html>

Última edición por ricardojara; 02/12/2012 a las 07:25
  #13 (permalink)  
Antiguo 02/12/2012, 13:20
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Semaforo Script

Cita:
Iniciado por IsaBelM Ver Mensaje
el código que te he facilitado es el que has de usar. en lugar de cambiar el fondo de los bloques, cambias el src de las imágenes

por mi parte ya te he dado las indicaciones para que puedas hacerlo. otra cosa es que hagas oídos sordos
Lo que pasa es que ya le contagiaste lo de meter código como si fuese cita, y no te da más bola para no llevarse otra costumbre peor.




Hace mucho tiempo comencé a hacer un experimento con semáforos. Era para otra cosa, pero en las pruebas usé una foto (muy mala) que quise aprovechar porque estaba.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>SEM&Aacute;FORO.</title>
<script type="text/javascript">

var R, G, B;

function color() {
var tono = Math.floor(Math.random()*255);

return tono;
}

function luces() {
var senal0 = Math.floor(Math.random()*10);

var senal = document.getElementById("optica" + senal0 +"");

var RGB = 
(senal.style.backgroundColor == "transparent") ? 
"rgb(" + color() + "," + color() + "," + color() + ")" : 
"transparent";

senal.style.backgroundColor = RGB;

setTimeout(luces , 456);
}

onload = luces;
</script>
<style type="text/css">

#marco {position: relative; height: 640px; width: 480px; margin: 0 auto; 
background-color: #393939; overflow: hidden; 
background-image: url(http://img31.imageshack.us/img31/8186/semaforobyn.jpg); }
#sf0 {position: absolute; top:0; left: 0; height: 640px; width: 480px; }
.opticas {width:100px; height: 90px; position: absolute; 
background-color: transparent; }
#optica0 {top:0px; left:50px; }
#optica1 {top:90px; left:50px; height: 80px; }
#optica2 {top:171px; left:50px;  }
#optica3 {top:-5px; left:200px; }
#optica4 {top:86px; left:200px; height: 80px; }
#optica5 {top:168px; left:200px; }
#optica6 {top:300px; left:240px; }
#optica7 {top:410px; left:240px; }
#optica8 {top:422px; left:30px; }
#optica9 {top:320px; left:30px; }
</style>
</head>
<body>
<h2>Sem&aacute;foro fumado.</h2>

<div id="marco">
<div id="optica0" class="opticas"></div>

<div id="optica1" class="opticas"></div>

<div id="optica2" class="opticas"></div>

<div id="optica3" class="opticas"></div>

<div id="optica4" class="opticas"></div>

<div id="optica5" class="opticas"></div>

<div id="optica6" class="opticas"></div>

<div id="optica7" class="opticas"></div>

<div id="optica8" class="opticas"></div>

<div id="optica9" class="opticas"></div>

<img src="http://img594.imageshack.us/img594/2787/semaforocolor.png" id="sf0">

</div>

</body>
</html>

Hoy vi este tema ya terminado, y ya que estoy dejo una versión que cambia la luz cuando se le pasa el puntero.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>SEM&Aacute;FORO.</title>
<script type="text/javascript">
function luz(o){
var optik = document.getElementById(o);
optik.style.visibility = (optik.style.visibility == "visible")? "hidden" : "visible";
}
</script>
<style type="text/css">

#marco {position: relative; height: 640px; width: 480px; margin: 0 auto; 
background-color: #393939; overflow: hidden; 
background-image: url(http://img31.imageshack.us/img31/8186/semaforobyn.jpg); }
#sf0 {position: absolute; top:0; left: 0; height: 640px; width: 480px; }
.opticas {width:100px; height: 90px; position: absolute; visibility: hidden; }
#optica0 {top:0px; left:50px; background-color: #ff0000; }
#optica1 {top:90px; left:50px; height: 80px; background-color: #ffff00; }
#optica2 {top:171px; left:50px; background-color: #00ff00; }
#optica3 {top:-5px; left:200px; background-color: #ff0000; }
#optica4 {top:86px; left:200px; height: 80px; background-color: #ffff00; }
#optica5 {top:168px; left:200px; background-color: #00ff00; }
#optica6 {top:300px; left:240px; background-color: #ffaa00;}
#optica7 {top:410px; left:240px; background-color: #dddddd;}
#optica8 {top:422px; left:30px; background-color: #00ff00; }
#optica9 {top:320px; left:30px; background-color: #ff9900; }
</style>
</head>
<body>
<h2>Sem&aacute;foro cambia al pasar el puntero.</h2>

<div id="marco">
<div id="optica0" class="opticas"></div>

<div id="optica1" class="opticas"></div>

<div id="optica2" class="opticas"></div>

<div id="optica3" class="opticas"></div>

<div id="optica4" class="opticas"></div>

<div id="optica5" class="opticas"></div>

<div id="optica6" class="opticas"></div>

<div id="optica7" class="opticas"></div>

<div id="optica8" class="opticas"></div>

<div id="optica9" class="opticas"></div>

<map name="miSemaforo">
<area shape=circle coords=100,60,30 onmouseover="luz('optica0')" href="javascript:void()">
<area shape=circle coords=100,150,30 onmouseover="luz('optica1')" href="javascript:void()">
<area shape=circle coords=100,230,30 onmouseover="luz('optica2')" href="javascript:void()">
<area shape=circle coords=240,60,30 onmouseover="luz('optica3')" href="javascript:void()">
<area shape=circle coords=240,140,30 onmouseover="luz('optica4')" href="javascript:void()">
<area shape=circle coords=250,230,30 onmouseover="luz('optica5')" href="javascript:void()">

<area shape=rect coords=320,300,250,400 onmouseover="luz('optica6')" href="javascript:void()">
<area shape=rect coords=320,420,270,504 onmouseover="luz('optica7')" href="javascript:void()">

<area shape=circle coords=90,470,30 onmouseover="luz('optica8')" href="javascript:void()">
<area shape=circle coords=90,370,30 onmouseover="luz('optica9')" href="javascript:void()">
</map>

<img src="http://img594.imageshack.us/img594/2787/semaforocolor.png" 
id="sf0" usemap="#miSemaforo">

</div>

</body>
</html>
El desafío sería hacer la verdadera secuencia, y que trabaje por sí misma. Varía en cada ciudad, pero mientras tenga su lógica, sirve.

Por supuesto que es para quien esté aprendiendo y quiera practicar. Vos, IsaBelM, ya estás grande y te pelás la naranja sola; no te quiero ver poniendo un ejemplo.

Y menos entre etiquetas de cita.









  #14 (permalink)  
Antiguo 02/12/2012, 16:01
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Semaforo Script

@furoya, nunca más apropiado el nombre, realmente hay que estar "fuma...o" para animarse a cruzar con semejante artefacto por delante.

Es el típico semáforo "macrista" , incentivador del uso de la biciSenda

__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #15 (permalink)  
Antiguo 02/12/2012, 18:15
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Semaforo Script

Sí, nuestro "Jefe de Gobierno" las incentiva tanto que las usan todos. Las bicicletas, los monopatines, los rollers, los skates, las motos, los caballos, los submarinos, las vimanas, ...

Y encima los que andan por ahí no saben que la prioridad de paso la tiene el peatón. Bah, ni siquiera respetan los semáforos, así que ¿qué me sorprende?.

Vos tenés suerte que vivís en los suburbios del oeste. Yo amo el centro de Buenos Aires, pero la gente me tiene podrido.

Bueno, te dejo, me voy a buscar otro tema para acosar a Isabel
  #16 (permalink)  
Antiguo 02/12/2012, 19:06
 
Fecha de Ingreso: noviembre-2012
Mensajes: 53
Antigüedad: 11 años, 5 meses
Puntos: 1
Respuesta: Semaforo Script

hola pues bien aqui os presento otro problema con el script
hice una funcion con timeout que llamaba a otra y esta otra la volvia a llamar para que esta la llamase a ella

todo eso para que el semaforo fuera cambiando los colores el solo bien
pero ahora quiero poner un boton que diga parar y que se paren ambas funciones o una lo que sea con tal de que paren se que para eso esta return false pero quiero que suceda solo cuando le doy al boton parar

aqui os dejo mi codigo como creeis que puedo parar la funcion o el script o lo que sea con un boton que ponga parar ?¿

Cita:
<html>
<script>
function chronos()
{
setTimeout("semaforo()",1000)
}
function semaforo()
{
setTimeout("chronos()",100)
var variable1=document.getElementById('arriba')
var variable2=document.getElementById('medio')
var variable3=document.getElementById('abajo')
if (variable2.src.match("semaforo_apagado.png") && variable1.src.match("semaforo_apagado.png"))
{
variable1.src="semaforo_rojo.png";
variable3.src="semaforo_apagado.png";
}
else if (variable1.src.match("semaforo_rojo.png"))
{
variable2.src="semaforo_amarillo.png";
variable1.src="semaforo_apagado.png";
}
else if (variable2.src.match("semaforo_amarillo.png"))
{
variable3.src="semaforo_verde.png";
variable2.src="semaforo_apagado.png";
}
else
{
}
}

</script>
<body onload="chronos()">
<center>
<img id="arriba" src="semaforo_apagado.png" width="190" height="190"></img>
<br/>
<img id="medio" src="semaforo_apagado.png" width="190" height="190"></img>
<br/>
<img id="abajo" src="semaforo_apagado.png" width="190" height="190"></img>
<br/>
<button onclick="parar()">Empezar</button>
</center>
</body>
</html>
  #17 (permalink)  
Antiguo 02/12/2012, 19:36
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Semaforo Script

Te ayudaría, pero como estás poniendo código entre etiquetas de cita, voy a esperar otro comedido que seguro aparezca.

Si usás setTimeout(), ya tenés que saber cómo pararlo. Está en los mismos tutoriales.

Tenés algunos errores para encarar el trabajo. La idea no es "se me ocurre cualquiera, y pregunto cómo lo hago porque seguro me voy a trabar en algo evidente". Lo que tenés que hacer es aprender, y a medida que encontrás nuevas formas de hacer algo, le inventás una utilidad. Si no encontraste cómo parar un setTimeout(), no ipodés inventar algo que necesite pararlo. Cuando lo encontrés, entonces se te va a ocurrir un semáforo con botón de paso. Y cuando le podás meter sonido, un semáforo para ciegos.

Por otro lado, además del BBCode para citas mal usado, tenés que poner el HTML completo para probar. El tuyo no tiene ni doctype, ni imágenes con dirección absoluta, ...

Es un desastre, y no sirve para ejemplo. O sí, sirve de mal ejemplo.
  #18 (permalink)  
Antiguo 02/12/2012, 20:32
 
Fecha de Ingreso: noviembre-2012
Mensajes: 53
Antigüedad: 11 años, 5 meses
Puntos: 1
Respuesta: Semaforo Script

Pues opino que la ruta relativa es mejor por que solo hay que tener la imagen en el mismo sitio que la pagina web no como en la ruta absoluta que aqui en el foro uno puede tener linux o windows o tener la unidad en D:\ o en H:\ etc etc es mejor relativa.

pero bueno sorry por ponerlo en cita en vez de en codigo pero hay que decir que es parecido y bueno he probado con cleartimeout pero no funciona

de todos modos os mando el codigo esta vez bien puesto

Código:
<html>
<script>
function chronos()
{
setTimeout("semaforo()",1000)
}
function semaforo()
{
setTimeout("chronos()",100)
var variable1=document.getElementById('arriba')
var variable2=document.getElementById('medio')
var variable3=document.getElementById('abajo')
if (variable2.src.match("semaforo_apagado.png") && variable1.src.match("semaforo_apagado.png"))
{
variable1.src="semaforo_rojo.png";
variable3.src="semaforo_apagado.png";
}
else if (variable1.src.match("semaforo_rojo.png"))
{
variable2.src="semaforo_amarillo.png";
variable1.src="semaforo_apagado.png";
}
else if (variable2.src.match("semaforo_amarillo.png"))
{
variable3.src="semaforo_verde.png";
variable2.src="semaforo_apagado.png";
}
else
{
}
}

</script>
<body onload="chronos()">
<center>
<img id="arriba" src="semaforo_apagado.png" width="190" height="190"></img>
<br/>
<img id="medio" src="semaforo_apagado.png" width="190" height="190"></img>
<br/>
<img id="abajo" src="semaforo_apagado.png" width="190" height="190"></img>
<br/>
<button onclick="parar()">Empezar</button>
</center>
</body>
</html>
lo que necesitaría sería una funcion que parase el proceso y he buscado mucho por internet pero ninguna me da resultado

Última edición por ricardojara; 02/12/2012 a las 20:41
  #19 (permalink)  
Antiguo 03/12/2012, 10:50
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Semaforo Script

No opines. Para opinar hay que saber. O pensar dos segundos. O ambos.

La ruta relativa es mejor para vos, que las tenés en el disco o en la misma carpeta. Para nosotros no, a menos que quieras que nos descarguemos las imágenes para hacer las pruebas.
Y eso no está tan mal, salvo por el detalle de que te olvidaste de linkear o mostrar las imágenes. ¿Ves cómo las puse yo?. Así tenías que ponerlas vos.

¿Y a quién le importa si tu servidor de imágenes las mete en el disco "Z"? Un enlace es un enlace, va a llegar al archivo que corresponde mientras esté bien escrito.

Y los BBCode de cita y código no se parecen. Ni en el botón .

Así que dejá de inventar excusas estúpidas.

clearTimeout() funciona prefectamente. Ni lo probaste. Porque no tenés que copiar y pegar lo que no entendés: tenés que leer un manual y cuando te queda claro el mecanismo, escribís el tuyo.

Y bien escrito; no como ese ejemplo donde no sólo no hay ningún clearTimeout(), sino que seguís omitiendo el doctype y la etiqueta de escript como corresponde.
  #20 (permalink)  
Antiguo 03/12/2012, 12:54
 
Fecha de Ingreso: noviembre-2012
Mensajes: 53
Antigüedad: 11 años, 5 meses
Puntos: 1
Respuesta: Semaforo Script

eres muy simpatico eh menuda joya se llevara tu novia novio

si os diese las rutas absolutas y las imagenes tendriais que cambiar la ruta por que no os serviria en vuestra maquina

en cambio si os diese las rutas relativas y las imagenes solo tendriais que poner la web en el mismo directorio

de todos modos si no os he dado las imagenes que CO... importa eso ?¿?¿ que sean absolutas o relativas

Para empezar yo no te he faltado en ningun momento al respeto por mucho que se equivoque alguien no te da derecho a ponerte como te pones tu nadie nace sabiendo.... dime de que presumes y ......

ya conseguí lo que buscaba gracias a todos aunque obviamente unos han ayudado mas que otros....

En fin si alguien tiene alguna duda de hacer algo de lo que me propuse hacer que me lo diga que ya tengo las respuesta me puede escribir el codigo en cita o en code le respondere igual no hago discriminaciones :)
  #21 (permalink)  
Antiguo 03/12/2012, 16:06
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Semaforo Script

(Aunque no era necesario, supongo que ahora queda bien claro por qué le ignoré el mensaje desde el principio. IsaBelM seguro creyó que podía salvar el tema -porque es muy capaz, pero un poco ingenua- y seguro Gustavo72 lo quiso ayudar, pero a esta gente no se le puede dar cabida. Como mucho se les usa el tema para aportar alguna güevadita, como hice yo.
¡Y encima el caradura se cree que me puede valorar!. Sí, por supuesto, me puso un "-1" con alguna excusa estúpida, que ya no recuerdo.)



Mi ex me dejó porque ya no me aguantaba. Y yo siempre estaré agradecido por los años que me toleró. Esa mujer es una santa. Pero todo esto es algo que no te importa, ni viene al caso (más o menos como todo lo que escribís).

Vos faltás el respeto con esos "ejemplos" que no sirven ni de ejemplo. Pero ¿a qué viene el comentario? ¿otro más fuera de lugar?.
Porque si estás acá ya tenés que saber. Tu necedad de venir a postear cualquier cosa negándote a mirar un tutorial -o los ejemplos que te dejan-, es algo que no te podemos tolerar.

Y a nadie le importa lo que "conseguiste". Me parece que eso quedó claro desde el principio.
Mucho menos importan las dudas (que creas) que podés despejar. Ninguno va a confiar en alguien que no lee las recomendaciones que le hacen, que no sabe la diferencia entre una dirección absoluta y una relativa sin destino, que no es capaz de interpretar un manual y que le da lo mismo escribir en etiquetas de cita o de código.




(Mmmm. Creo que me estoy olvidando de algo...)
  #22 (permalink)  
Antiguo 04/12/2012, 03:52
 
Fecha de Ingreso: noviembre-2012
Mensajes: 53
Antigüedad: 11 años, 5 meses
Puntos: 1
Respuesta: Semaforo Script

Osea yo pregunto que parte de mi codigo está mal me ponen otro codigo que no tiene nada que ver se pone un mal follado a insultarme e intentar dejarme por los suelos solo por que el tiene mas experiencia en este tema y todavia soy yo el malo

con razon todos mis profesores de informatica me dicen que no consulte en foros si van asi normal
  #23 (permalink)  
Antiguo 04/12/2012, 06:29
Avatar de Aijoona
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 779
Antigüedad: 12 años, 11 meses
Puntos: 343
Respuesta: Semaforo Script

Entre pensando que estaban discutiendo como implementar Semáforos en JS :|
__________________
blog | @aijoona
  #24 (permalink)  
Antiguo 04/12/2012, 06:38
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 23 años, 2 meses
Puntos: 535
Respuesta: Semaforo Script

Hola:

Cita:
UnaDeLasDiferenciasFundamentalesEnUsarLaEtiquetaDe CitarODeCódigoEstáEnQue,ADiferenciaDeLaPrimera,LaS egundaAdmitePalabrasLargasSinColocarAutomáticament eEspaciosQueProbablementeRompanLoQueLaEtiquetaCODE DebeProteger
Código:
UnaDeLasDiferenciasFundamentalesEnUsarLaEtiquetaDeCitarODeCódigoEstáEnQue,ADiferenciaDeLaPrimera,LaSegundaAdmitePalabrasLargasSinColocarAutomáticamenteEspaciosQueProbablementeRompanLoQueLaEtiquetaCODEDebeProteger

Adiós.


Edito:

Cita:
con razon todos mis profesores de informatica me dicen que no consulte en foros si van asi normal
NO. Te lo dicen para que estudies. O tal vez todos tus profesores de informática sean bastante estúpidos, cosa que se me hace imposible hasta de creer.
__________________
...___...

Última edición por AlZuwaga; 04/12/2012 a las 06:46
  #25 (permalink)  
Antiguo 04/12/2012, 07:09
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Semaforo Script

Seguramente le dijo que no posteara en foros porque ya sabe que ricardojara no sirve para postear en foros. ¿A quién se le puede ocurrir meter ese código lamentable y después pretender que le digamos qué está mal? ¡Si encima ni ve las recomendaciones! O las ve y no las entiende, y lo mismo discute.



Y no sabía que a esas condiciones se les llamaba "semáforos".
Es lo lindo de estos foros, todos los días se aprende algo nuevo.

Etiquetas: programa, semaforo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 09:42.