3

A simple way to create rainbow colored text on your web page. Just cut and paste the code into Notepad, save as Rainbow.htm and run it on your browser.

Votes + Comments
Thanks for sharing!
cool
<!-- Experiments with text   vegaseat   6/15/2002 -->
<!-- hexnumbers  -->

<HTML>
<HEAD>

<TITLE>Rainbow Text</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin hide from old browsers

function createHexArray(n) 
{
  this.length = n;
  for (var i = 1; i <= n; i++)
    this[i] = i - 1;
  this[11] = "A";
  this[12] = "B";
  this[13] = "C";
  this[14] = "D";
  this[15] = "E";
  this[16] = "F";
  return this;
}

hx = new createHexArray(16);

function convertToHex(x) 
{
  if (x < 17) 
    x = 16;
	
  var high = x / 16;
  var s = high+"";
  
  s = s.substring(0, 2);
  high = parseInt(s, 10);
  
  var left = hx[high + 1];
  var low = x - high * 16;

  if (low < 1) 
    low = 1;
  s = low + "";
  s = s.substring(0, 2);
  low = parseInt(s, 10);
  
  var right = hx[low + 1];
  var string = left + "" + right;
  return string;
}

function makeRainbow(text) 
{
  text = text.substring(0, text.length);
  color_d1 = 255;
  mul = color_d1 / text.length;
  for(var i = 0; i < text.length; i++) {
    color_d1 = 255*Math.sin(i / (text.length / 3));
    color_h1 = convertToHex(color_d1);
    color_d2 = mul * i;
    color_h2 = convertToHex(color_d2);
    k = text.length;
    j = k - i;
    if (j < 0) 
	  j = 0;
    color_d3 = mul * j;
    color_h3 = convertToHex(color_d3);
    document.write("<FONT COLOR=\"#" + color_h3 + color_h1 + color_h2 + "\">" + text.substring(i, i + 1) + "</FONT>");
  }
}

// End  hide from old browsers -->
</script>

</HEAD>

<body bgcolor="#FFFFCC">

<center>
<strong>
<font size=6>

<script>
<!--

// change to your own text ...
makeRainbow("Welcome to Boulder City Nevada");
document.write("<br>");
makeRainbow("The best dam city in the USA");

// -->
</script>

</font>
</strong>
</center>

</body>
</html>
4
Contributors
3
Replies
23
Views
12 Years
Discussion Span
Last Post by Troy III
0

This has to be the most simplest codesnippet in javascript. All I did was copy and paste and it looks nice. I attached an image of the result, it's very colorful.

5065bc02cbb6f58435f17d6c4a95ff0f

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.