<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>путешествие во времени</title>
<style type="text/css">
div {
border: 0px solid black;
width:50px;
height:50px;
float:left;
margin: auto;
text-align: center;
}
<h1>log {text-align:right;}</h1>
</style>
<script type="text/javascript">
function init(d, r, g, b, r1, g1, b1)
{
d.colors = new Array();
d.colors.push(r);
d.colors.push(g);
d.colors.push(b);
d.colors.push(r1);
d.colors.push(g1);
d.colors.push(b1);
}
function zapusk(d)
{
s = '#';
for (var i = 0; i < 3; i++)
{
d.colors[i] += d.colors[i + 3];
if (d.colors[i] < 0)
{
d.colors[i] = 0;
d.colors[i + 3] = -d.colors[i + 3];
}
if (d.colors[i] > 0xff)
{
d.colors[i] = 0xff;
d.colors[i + 3] = -d.colors[i + 3];
}
s1 = Math.floor(d.colors[i]).toString(16);
while (s1.length < 2)
{
s1 = '0' + s1;
}
s += s1;
}
d.style.backgroundColor = s;
}
window.onload=function(){
init(document.getElementById('cvet1'), 255, 0, 0, 1, 1, 1);
init(document.getElementById('cvet2'), 0, 0, 255, 1, 1, 1);
init(document.getElementById('cvet3'), 0, 255, 0, 1, 1, 1);
init(document.getElementById('cvet4'), 255, 0, 255, 1, 1, 1);
setInterval(function(){zapusk(document.getElementById('cvet1'))}, 1);
setInterval(function(){zapusk(document.getElementById('cvet2'))}, 5);
setInterval(function(){zapusk(document.getElementById('cvet3'))}, 10);
setInterval(function(){zapusk(document.getElementById('cvet4'))}, 20);
}
</script>
</head>
<body>
<div style="width:100px; height:100px; border:0px">
<div id="cvet1"style="background-color: rgb(0, 0, 0);"></div>
<div id="cvet2"style="background-color: rgb(0, 0, 0);"></div>
<div id="cvet3"style="background-color: rgb(0, 0, 0);"></div>
<div id="cvet4"style="background-color: rgb(0, 0, 0);"></div>
</div>
<div id="log">#ffffff</div>
</body></html>