manejo colores en javascript
Hola a todos!! tengo el siguiente problema, que no se como hacer para resolverlo a ver si alguien me puede hechar una mano.Os cuento necsito que cuando el fondo lo cambie a negro, y presione alguno de los botones, el color en vez de desvanecerse del color ahasta el blanco que vaya desde el color hasta negro y viceversa. Parece facil pero no consigo que me slaga.Os dejo el codigo de lo que tengo echo. grasias y saludos
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<script language="JavaScript" type="text/javascript">
var rgb="rojo";
var r,g, b;
var Rojo=0xFF0000, incR=0x000101;
var Verde=0x00FF00, incV=0x010001;
var Azul=0x0000FF, incA=0x010100;
var fondo = "white";
function CambiarRojo()
{
Rojo+=incR;
document.getElementById("p1").style.color=Rojo;
document.f1.colorActual.value = document.getElementById("p1").style.color;
if (Rojo==0xFF0000 || Rojo==0xFFFFFF)
incR*=-1;
}
function CambiarVerde()
{
Verde+=incV;
document.getElementById("p1").style.color=Verde;
document.f1.colorActual.value = document.getElementById("p1").style.color;
if (Verde==0x00FF00 || Verde==0xFFFFFF)
incV*=-1;
}
function CambiarAzul()
{
Azul+=incA;
document.getElementById("p1").style.color=Azul;
document.f1.colorActual.value = document.getElementById("p1").style.color;
if (Azul==0x0000FF || Azul==0xFFFFFF)
incA*=-1;
}
function cambiarfondo()
{
if(fondo == "white")
{
fondo="black"
}
else
{
fondo="white"
}
document.body.style.backgroundColor = fondo;
}
</script>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="body.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="f1">
<center>
<h1 id="p1">Ya Se Hacer Tonterias Inutiles<br> Con Javascript</h1>
<br><br>
<input type="text" name=\'colorActual\';>
<br><br>
<input type="button" value=" Cambiar a Rojo" onClick="r=setInterval(\'CambiarRojo()\',1); clearInterval(g); clearInterval(b);" name="rojo">
<input type="button" value="Cambiar a Verde" onClick="g=setInterval(\'CambiarVerde()\',1); clearInterval(r); clearInterval(b);" name="verde">
<input type="button" value="Cambiar a Azul" onClick="b=setInterval(\'CambiarAzul()\',1); clearInterval(g); clearInterval(r);" name="Azul"> <br>
<br>
<input type="button" value="Cambiar fondo" onclick="cambiarfondo()">
</center>
</form>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<script language="JavaScript" type="text/javascript">
var rgb="rojo";
var r,g, b;
var Rojo=0xFF0000, incR=0x000101;
var Verde=0x00FF00, incV=0x010001;
var Azul=0x0000FF, incA=0x010100;
var fondo = "white";
function CambiarRojo()
{
Rojo+=incR;
document.getElementById("p1").style.color=Rojo;
document.f1.colorActual.value = document.getElementById("p1").style.color;
if (Rojo==0xFF0000 || Rojo==0xFFFFFF)
incR*=-1;
}
function CambiarVerde()
{
Verde+=incV;
document.getElementById("p1").style.color=Verde;
document.f1.colorActual.value = document.getElementById("p1").style.color;
if (Verde==0x00FF00 || Verde==0xFFFFFF)
incV*=-1;
}
function CambiarAzul()
{
Azul+=incA;
document.getElementById("p1").style.color=Azul;
document.f1.colorActual.value = document.getElementById("p1").style.color;
if (Azul==0x0000FF || Azul==0xFFFFFF)
incA*=-1;
}
function cambiarfondo()
{
if(fondo == "white")
{
fondo="black"
}
else
{
fondo="white"
}
document.body.style.backgroundColor = fondo;
}
</script>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="body.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="f1">
<center>
<h1 id="p1">Ya Se Hacer Tonterias Inutiles<br> Con Javascript</h1>
<br><br>
<input type="text" name=\'colorActual\';>
<br><br>
<input type="button" value=" Cambiar a Rojo" onClick="r=setInterval(\'CambiarRojo()\',1); clearInterval(g); clearInterval(b);" name="rojo">
<input type="button" value="Cambiar a Verde" onClick="g=setInterval(\'CambiarVerde()\',1); clearInterval(r); clearInterval(b);" name="verde">
<input type="button" value="Cambiar a Azul" onClick="b=setInterval(\'CambiarAzul()\',1); clearInterval(g); clearInterval(r);" name="Azul"> <br>
<br>
<input type="button" value="Cambiar fondo" onclick="cambiarfondo()">
</center>
</form>
</body>
</html>