Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

Randomly Letter color change Using JavaScript

Author: DevASP
Download Source Code : 557_TextColorChanger.zip

This article is about how you can randomly change the color of each letter in the specified message.

  • Steps you will do. 
  • Start visual studio and create a new web application. 
  • Open the HTML design of your page and before closing the head tag add the following JavaScript function.

 

<script language="JavaScript1.2">

 

var msg = "Welcome to DEVASP!";

var colorTimer = null;

 

for (var i=0; i<msg.length; i++)

{

 

document.write("<span id = \"vjeko" + i + "\" style = \"color:blue; font-size:xx-large;\">" + msg.charAt(i) + "</span>");

 

}

 

function toHex(n){

 

var hexChars = "0123456789ABCDEF";

 

if (n == 0) return n;

var j, k;

var temp = "";

 

while (n != 0){

 

j = n % 16;

n = (n - j)/16;

temp = hexChars.charAt(j) + temp;

 

}

return temp;

}

 

function colorize(){

 

if (!document.all) return;

 

for (i=0; i<msg.length; i++){

 

      k = Math.round(Math.random() * 16777215);

      k = toHex(k);

 

      while (k.length < 6){

 

      k = k + "0";

      }

 

document.all["vjeko" + i].style.color = '#' + k;

 

}

colorTimer = window.setTimeout("colorize()", 200);

}

 

</script>

 

Now add the following HTML code which will design your web page and call the above JavaScript function to slide the window.

 

<body MS_POSITIONING="GridLayout" onLoad="colorize()">

<form id="Form1" method="post" runat="server">

<center>

<H4>Dont forget to visit www.devasp.com</H4>

<a href="http://www.devasp.com">Devasp Team</a>

</center>

</form>

</body>

 

Run you application and see the color of message. NOTE you can also change the message. To edit the string go to the line number one in the JavaScript code and change it to your desired message. 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Slide Your browser up, down, right, left Using JavaScript

Disclaimer - Privacy
© 2002-2017 DevASP.net