« »

This JavaScript shows a color cube with the 216 Web-safe colors without using any images. The dots blink randomly.

Label: Web Safe Color Cube

Demo
Enlarge
Reload
New window

Code
JavaScript
Print

Copy All x2

<script language="javascript">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

// this another cool script by Delirius (www.final-solution.de) showing the 
// websafe colorcube(216 colorz) with blinking dots
// no images are used, only this code
// this script is freeware if you dont delete the comments or modify the code
// germany, 23.02.02

var ns = document.layers;
var ie = document.all;
var w3 = document.getElementById && !ie;

var layerCount = 0;
var webColorz = new Array();
var lastColorDot = 1;
var xoffset=(screen.width + 78) / 2;
var yoffset=screen.height - 230;
var currentx=xoffset;
var currenty=yoffset;

for(i = 0; i < 10; i++) {webColorz[i] = i + '';}
for(i = 10; i < 16; i++) {webColorz[i] = String.fromCharCode(55 + i);}

preBuildColorCube();

function preBuildColorCube() {
   for(x = 255; x >= 0; x -= 51) {
      for(y = 255; y >= 0; y -= 51) {
         for(z = 255; z >= 0; z -= 51) {
            ++layerCount;
            currentx -= 4;
            fstCol = webColorz[parseInt(x / 16)] + webColorz[x % 16];
            secCol = webColorz[parseInt(y / 16)] + webColorz[y % 16];
            thdCol = webColorz[parseInt(z / 16)] + webColorz[z % 16];
            currentCol = fstCol + secCol + thdCol;
            if(ns) {document.write('<layer name=delirius' + layerCount + ' left=' + currentx + ' top=' + currenty + ' visibility=show>');}
            else if(ie || w3) {document.write('<div id=delirius' + layerCount + ' style=position:absolute;top:' + currenty + ';left:' + currentx + ';visibility:visible>');}
            document.write('<font size=10 color=' + currentCol + '>.</font>');
            if(ns) {document.write('</layer>');}
            else if(ie || w3) {document.write('</div>');}
         }
         currentx += 11;
         currenty -= 5;
      }
      currentx = xoffset;
      currenty += 20;
   }
   window.setInterval('hideColorDot()', 100);
}

function hideColorDot() {
   thisColorDot = 1 + parseInt(216 * Math.random());
   if(ns) {
      document.layers["delirius" + lastColorDot].visibility = 'show';
      document.layers["delirius" + thisColorDot].visibility = 'hide';
   } else if(ie) {
      document.all["delirius" + lastColorDot].style.visibility = 'visible';
      document.all["delirius" + thisColorDot].style.visibility = 'hidden';
   } else if(w3) {
      document.getElementById("delirius" + lastColorDot).style = 'visible';
      document.getElementById("delirius" + thisColorDot).style = 'hidden';
   }
   lastColorDot = thisColorDot;
}



</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->