<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>ej3</title>
<style type="text/css">
td {
	text-align: center;
}
</style>

<script type="text/javascript">
function high(salida) { 
	var c;//c almacena el color del led
	
	if(salida<=3){c = "#ff0000";
		}else {
		c = "#00ff00";}
	setTimeout('document.getElementById(' + salida + ').style.background ="'+ c+ '"',tiempo);	
}
  		
 function low(salida) { 
 	setTimeout('document.getElementById(' + salida + ').style.background ="#FFFFFF"',tiempo);	
 
}

var tiempo = 0;

function pausa(milisegundos) {
	tiempo = tiempo + milisegundos;
}

var tiempoDp;//almacena el tiempo que tarda p() en ejecutarse


function p() {//aquí debemos escribir el programa que se repite una sola vez
	var tInicio// almacena el momento de inicio de p
	var d = new Date();
	tInicio = d.getTime();
	//apagamos todas las salidas
	for (i=0;i<8;i++) {
		low(i);
		
	}
	pausa(200);
	var i = 7;
	while (i>-1){
	high(i);
	pausa(500);
	i=i-2;
	
}
	
}

function bucle(){//esta función se comporta como un bucle infinito sobre la función p()
	p();
	setInterval('p()',tiempo);

}
function reinicio() {

document.location.href = document.location.href;

}
</script>

</head>
<body onload="p()"><!-- bucle() para bucle indfinito  y p()para una sola vez.Esto carga el programa nada mas cargar la página-->



<table border="1" cellpadding="2" cellspacing="2">
	<tbody><tr>
		<td  id="7">7</td>
		<td  id="6">6</td>
		<td  id="5">5</td>
		<td  id="4">4</td>
		<td  id="3">3</td>
		<td  id="2">2</td>
		<td id="1">1</td>
		<td id="0">0</td>
		
	</tr>
	
</tbody></table>
<br>

<input value="reset" onclick="reinicio()" type="submit">
</body></html>