Introduction
Till today we have seen many articles about how to change background color of
button, textbox or any other controls but we never seen any article which
explains that how to change the background of web page randomly at run time. In
this article we will do the same to change the color of background using some
JavaScript lines. I have added some screenshots to express the advantages.
Advantages
- It can run on any browser without having <browserCap> settings.
- It can not be stopped using stop button of browser.
- At-least every color will be displayed randomly.
Coding of Web Page
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Crazy
Colors in ASP.Net</title>
<!--
CRAZY COLOR IN ASP.NET-->
<script language="JavaScript">
<!--
//you can assign the initial color of the background here
r=255;
g=255;
b=255;
flag=0;
t=new
Array;
o=new Array;
d=new Array;
function
hex(a,c)
{
t[a]=Math.floor(c/16)
o[a]=c%16
switch (t[a])
{
case 10:
t[a]='A';
break;
case 11:
t[a]='B';
break;
case 12:
t[a]='C';
break;
case 13:
t[a]='D';
break;
case 14:
t[a]='E';
break;
case 15:
t[a]='F';
break;
default:
break;
}
switch
(o[a])
{
case 10:
o[a]='A';
break;
case 11:
o[a]='B';
break;
case 12:
o[a]='C';
break;
case 13:
o[a]='D';
break;
case 14:
o[a]='E';
break;
case 15:
o[a]='F';
break;
default:
break;
}
}
function
ran(a,c)
{
if
((Math.random()>2/3||c==0)&&c<255)
{
c++
d[a]=2;
}
else
{
if
((Math.random()<=1/2||c==255)&&c>0)
{
c--
d[a]=1;
}
else d[a]=0;
}
return c
}
function
do_it(a,c)
{
if
((d[a]==2&&c<255)||c==0)
{
c++
d[a]=2
}
else
if ((d[a]==1&&c>0)||c==255)
{
c--;
d[a]=1;
}
if
(a==3)
{
if
(d[1]==0&&d[2]==0&&d[3]==0)
flag=1
}
return c
}
function
crazy()
{
if
(flag==0)
{
r=ran(1, r);
g=ran(2, g);
b=ran(3, b);
hex(1,r)
hex(2,g)
hex(3,b)
document.body.style.background="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3]
flag=50
}
else
{
r=do_it(1, r)
g=do_it(2,g)
b=do_it(3,b)
hex(1,r)
hex(2,g)
hex(3,b)
document.body.style.background="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3]
flag--
}
setTimeout('crazy()',50)}
</script>
</head>
<body onload="crazy()">
<form id="form1" runat="server">
<div>
<strong><span style="font-size: 14pt;
color: #0000ff; font-family: Verdana">Crazy Color
in ASP.Net<br />
<br />
<span style="font-size: 11pt;
color: #ff0033">Keep your eye here for some seconds.
</span>
<br />
</span></strong>
<br />
</div>
</form>
</body>
</html>
HAVE A GREAT PROGRAMMING!