RStankov · January 8, 2010 00:07
diff --git a/light_show.html b/light_show.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>light show</title>
  <style>
    ul {
      list-style-type: none;
    }
    li {
      width: 10px;
      height: 10px;
      float: left;
      margin: 2px;
      -webkit-border-radius: 5px;
      border: 1px solid red;
    }
    .on {
      background-color: red;
    }
  </style>
 </head>
 <body>
  <ul id="lights"></ul>
  <script>
    var lights  = [],
        timer   = 1,
        on      = [
         [0,7],
         [1,6],
         [2,5],
         [3,4],
         [3,4],
         [2,5],
         [1,6],
         [0,7],
         [1,3,5,7],
         [0,2,4,6],
         [1,2,4,6],
         [2,3,4,6],
         [3,4,5,6],
         [4,5,6,7],
         [5,6,7],
         [6,7],
         [7],
         [6],
         [5],
         [4],
         [3],
         [2],
         [1],
         [0]
      ];
    
    for(var i=0; i<7; i++){
      document.getElementById('lights').appendChild(lights[i] = document.createElement('li'));
    }
    
    setInterval(function(){
      timer = timer < on.length ? timer + 1 : 1; 
      for(var i=0,l=lights.length; i<l; i++){
        lights[i].className = on[timer-1].indexOf(i) != -1 ? 'on' : '';
      }
    }, 100);
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>light show</title>
	<style>
	ul {
	list-style-type: none;
	}
	li {
	width: 10px;
	height: 10px;
	float: left;
	margin: 2px;
	-webkit-border-radius: 5px;
	border: 1px solid red;
	}
	.on {
	background-color: red;
	}
	</style>
	</head>
	<body>
	<ul id="lights"></ul>
	<script>
	var lights = [],
	timer = 1,
	on = [
	[0,7],
	[1,6],
	[2,5],
	[3,4],
	[3,4],
	[2,5],
	[1,6],
	[0,7],
	[1,3,5,7],
	[0,2,4,6],
	[1,2,4,6],
	[2,3,4,6],
	[3,4,5,6],
	[4,5,6,7],
	[5,6,7],
	[6,7],
	[7],
	[6],
	[5],
	[4],
	[3],
	[2],
	[1],
	[0]
	];

	for(var i=0; i<7; i++){
	document.getElementById('lights').appendChild(lights[i] = document.createElement('li'));
	}

	setInterval(function(){
	timer = timer < on.length ? timer + 1 : 1;
	for(var i=0,l=lights.length; i<l; i++){
	lights[i].className = on[timer-1].indexOf(i) != -1 ? 'on' : '';
	}
	}, 100);
	</script>
	</body>
	</html>