| Categories | Latest | Search | Login |

Back

Matrix



The following script will produce a cheap matrix style effect.
<script type="text/javascript">

var w = 45;
var h = 30;
var dtable_callback = null;

function dtable_stop()
{
   clearTimeout(dtable_callback);
   return null;
}

function dtable_set()
{
   //var s = " DIGITAL ";   //   9
   //var s = " DIG TAL ";   //   9
   //var s = " DIG TAL ";   //   9
   var s = " DIG TAL DIGITALL ";   //   18
   //var s = "III DIG TAL IIIII ";   //   18
   //var s = "TTT DIG TAL TTTTT ";   //   18
   //var s = "AAA DIG TAL AAAAI ";   //   18
   var num = 18;
   var colours = new Array(5);
   colours[0] = "#00ff00";
   colours[1] = "#00ff33";
   colours[2] = "#33ff00";
   colours[3] = "#12ff1a";
   colours[4] = "#aaff34";
   
   var x = 0;
   var y = 0;
   var ww = w;
   var hh = h;
   
   for(i=0;i<20;i++)
   {
      x = Math.floor(Math.random(ww)*100%ww);
      y = Math.floor(Math.random(hh)*100%hh);
      document.getElementById('dtable').rows[y].cells[x].innerHTML = s.charAt( Math.floor(Math.random(num)*100%num) );
      document.getElementById('dtable').rows[y].cells[x].style.color = colours[Math.floor(Math.random(5)*100%5)];
   }
   
   var nn = Math.floor(Math.random(4)*100%4);
   if(1 == nn)
   {
      var s = "DIGITAL";
      for(i=0;i<7;i++)
      {
         document.getElementById('dtable').rows[(Math.floor(y/2))].cells[(Math.floor(x/2))+i].innerHTML = s.charAt( i );
         document.getElementById('dtable').rows[(Math.floor(y/2))].cells[(Math.floor(x/2))+i].style.color = colours[Math.floor(Math.random(5)*100%5)];
      }
   }
   dtable_callback=setTimeout ('dtable_set()', 5);
}

function init_table(w, h)
{
   var s = "<table id='dtable' width='100%' border='0' style='background-color: black; color: green; font-family:monospace; font-weight: bold; font-size: 20;'>";
   for(i=0;i<h;i++)
   {
      s += "<tr>";
      for(j=0;j<w;j++)
      {
         s += "<td> <br></td>";
      }
      s += "</tr>";
   }
   s += "</table>";
   return s;
}
</script>

<script type="text/javascript">
document.write(init_table(w, h));
dtable_set(w, h);
</script>
<br /><br />
<a href='#' onclick="dtable_stop();">Stop</a>
<br />


Back

rabbit By rabbit Created on 18th of April 2010, at 10.52 pm
Modified on 21st of June 2010, at 8.24 pm
Category: Javascript: General

rabbitin on again!

Other Docs by rabbit

   system and popen
   Ticker Tape Scrollers
   Javascript Regular Expressions
   Simple Popup Dialogues
   Matrix

View all



Digg  del.icio.us  Reddit  Slashdot  StumbleUpon  TwitThis  


COMMENTS


Search Docs


Browse Docs

Programming
     C
     C++
     Python
     Tcl/Tk
     Java
     PHP
     Perl
     HTML
     Javascript
     Other
Computing
     Linux
     Windows
     Security
     Networks
     Graphics
     Gaming
     Other