есть во такой html код
<!DOCTYPE html>
<!-- saved from url=(0046)http://fiddle.jshell.net/holden321/hukzq/show/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by holden321</title>
<script type="text/javascript" src="dummy.js"></script>
<link rel="stylesheet" type="text/css" href="result-light.css">
<style type="text/css">
div {
border: 0px solid black;
width:50px;
height:50px;
float:left;
margin: auto;
text-align: center;
}
#log {position:absolute;left:0;right:0;text-align:center;}
</style>
<script type="text/javascript">//<![CDATA[
window.onload=function(){
colorBox("cvet1",1,0);
colorBox("cvet2",2,0);
colorBox("cvet3",3,0);
colorBox("cvet4",4,0);
function colorBox(element,minutes,color) {
element=document.getElementById(element);
var interval=10,step=Math.round(0xffffff/(minutes*60*1E3)*interval);
setInterval(function(){
color=(color+=step)>0xffffff?(color-=0xffffff):color;
clr=color.toString(16);
element.style.backgroundColor='#'+"000000".substr(clr.length)+clr;
document.getElementById("log").innerHTML=color;
return color;
},interval);
}
}//]]>
</script>
</head>
<body>
<div style="width:100px; height:100px; border:0px">
<div id="cvet1" style="background-color: rgb(238, 59, 192);"></div>
<div id="cvet2" style="background-color: rgb(119, 30, 223);"></div>
<div id="cvet3" style="background-color: rgb(79, 106, 63);"></div>
<div id="cvet4" style="background-color: rgb(59, 143, 239);"></div>
</div>
<div id="log">#00131e</div>
</body></html>
по нему получается 4 квадратика, которые меняют цвета по порядку но с разной скоростью отличной на 1 у каждого квадратика
- это создает все варианты комбинаций цветов для четырех квадратиков, как сделать так чтобы при каждом новом открытии страницы, цвета начинали меняться с того момента на котором остановились - когда закрылась страница, или каждый онлайн на странице начинает смотреть изменение цвета с момента последнего онлайн то есть изменение цветов происходит не останавливаясь не начиная с начала?
Примечание:
В этом варианте
<html>
<head>
<style type="text/css">
div {
border: 0px solid black;
width:50px;
height:50px;
float:left;
margin: auto;text-align: center;
}
</style>
</head>
<body>
<center>
<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, 255, 0);"></div>
<div id="cvet3" style="background-color: rgb(0, 0, 255);"></div>
<div id="cvet4" style="background-color: rgb(255, 0, 0);"></div>
</div>
<script>
function SquareColor(min,n) {
this.r=0;
this.g=0;
this.b=0;
this.cycle=0;
this.min=min;
}
sc1 = new SquareColor(5);
sc2 = new SquareColor(4);
sc3 = new SquareColor(3);
sc4 = new SquareColor(2.5);
function ChangeColor(sc) {
switch(sc.cycle) {
case(0): { // КРАСН
if(sc.r<255) sc.r+=sc.min;
if(sc.g>0) sc.g-=sc.min;
if(sc.b>0) sc.b-=sc.min;
if(sc.r >= 255 && sc.g <= 0 && sc.b <= 0) sc.cycle++;
} break;
case(1): { // ОРАНЖ
if(sc.r<255) sc.r+=sc.min;
if(sc.g>127) sc.g-=sc.min; else if(sc.g<127) sc.g+=sc.min;
if(sc.b>0) sc.b-=sc.min;
if(sc.r >= 255 && sc.b == 0) if(sc.g > 120 && sc.g < 130) sc.cycle++;
} break;
case(2): { // ЖЁЛТ
if(sc.r<255) sc.r+=sc.min;
if(sc.g<255) sc.g+=sc.min;
if(sc.b>0) sc.b-=sc.min;
if(sc.r >= 255 && sc.g >= 255 && sc.b <= 0) sc.cycle++;
} break;
case(3): { // 3ЕЛЁН
if(sc.r>0) sc.r-=sc.min;
if(sc.g<255) sc.g+=sc.min;
if(sc.b>0) sc.b-=sc.min;
if(sc.r <= 0 && sc.g >= 255 && sc.b <= 0) sc.cycle++;
} break;
case(4): { // ГОЛУБ
if(sc.r>1) sc.r-=sc.min;
if(sc.g<255) sc.g+=sc.min;
if(sc.b<255) sc.b+=sc.min;
if(sc.r <= 0 && sc.g >= 255 && sc.b >= 255) sc.cycle++;
} break;
case(5): { // СИН
if(sc.r>0) sc.r-=sc.min;
if(sc.g>0) sc.g-=sc.min;
if(sc.b<255) sc.b+=sc.min;
if(sc.r <= 0 && sc.g <= 0 && sc.b >= 255) sc.cycle++;
} break;
case(6): { // ФИОЛЕТ
if(sc.r<255) sc.r+=sc.min;
if(sc.g>0) sc.g-=sc.min;
if(sc.b<255) sc.b+=sc.min;
if(sc.r >= 255 && sc.g <= 0 && sc.b >= 255) sc.cycle=0;
} break;
}
return 'rgb(' + sc.r + ',' + sc.g + ',' + sc.b + ')';
}
function zapusk1(){
document.getElementById("cvet1").style.backgroundColor=ChangeColor(sc1);
}
function zapusk2(){
document.getElementById("cvet2").style.backgroundColor=ChangeColor(sc2);
}
function zapusk3(){
document.getElementById("cvet3").style.backgroundColor=ChangeColor(sc3);
}
function zapusk4(){
document.getElementById("cvet4").style.backgroundColor=ChangeColor(sc4);
}
setInterval('zapusk1()',0.2);
setInterval('zapusk2()',0.5);
setInterval('zapusk3()',0.8);
setInterval('zapusk4()',1);
</script>
</center>
</body></html>
у меня не работает когда я увеличиваю число квадратиков хотя бы до 4096, на самом деле мне нужно 160 000 квадратиков и больше