есть во такой html код <html><center><head><style type="text/css"> div { border: 0px solid black; width:50px; height:50px; float:left; margin: auto;text-align: center; } </style> </head> <body> <div id="toper"> <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, 256, 0);"></div> <div id="cvet3" style="background-color: rgb(0, 0, 256);"></div> <div id="cvet4" style="background-color: rgb(256, 0, 0);"></div> </div></div> <script type="text/javascript" async="" src="./Случайная картинка_files/watch.js"></script><script language="javascript"> function cvet(){ var a=Math.ceil(Math.random() *256); var b=Math.ceil(Math.random() *256); var c=Math.ceil(Math.random() *256); var color= 'rgb(' + a + ',' + b + ',' + c + ')'; return color; } </script> </body> <script> function zapusk() { var t=new Date() document.getElementById("cvet1").style.backgroundColor=cvet(); document.getElementById("cvet2").style.backgroundColor=cvet(); document.getElementById("cvet3").style.backgroundColor=cvet(); document.getElementById("cvet4").style.backgroundColor=cvet(); setTimeout('zapusk()',100) } </script><body OnLoad="zapusk()"> </center> </body></html> по нему получается картинка из таких квадратиков например 20 000 квадратиков, они меняются с заданной скоростью случайно, то есть цвета квадратиков меняются случайно, 1) мне нужно сделать так чтобы цвета менялись по порядку не случайно, 2) чтобы скорость смены цвета квадратиков была разная точнее скорость каждого квадратика отличается на 1 3) и чтобы при каждом новом открытии, цвета начинали меняться с того момента на котором остановились - когда закрылась страница, или каждый онлайн на странице начинает смотреть изменение цвета с момента последнего онлайн то есть изменение цветов происходит по порядку не останавливаясь не начиная с начала. Так как скорость смены цветов каждого квадратика отличается на +1, то каждый раз будет новая картинка если продолжать порядок не начиная сначала. У меня еще есть такой html - это то что я смог придумать возможно тут много ошибок. Подскажите как выполнить эти три задачи или хотя бы один из этих вопросов. <html><style> div {border: 0px solid black; width:50px; height:50px; float:left;} </style> <div style="width:100px; height:100px; border:0px"> <div id="cvet1" ></div> <div id="cvet2" ></div> <div id="cvet3" ></div> <div id="cvet4" ></div> </div> <script> function cvet10(x){var x=0; x<256; x++; for (var a=0; a<256; a=Math.floor(window.setInterval(" ",1))); var color= 'rgb(' + a + ',' + a + ',' + a + ')'; setTimeout("cvet10(x)",1) return a; }</script> <script> function cvet20(x){var x=0; x<256; x++; for (var a=0; a<256; a=(Math.floor(window.setInterval(" ",1)))+(Math.floor(window.setInterval(" ",1)))); var color= 'rgb(' + a + ',' + a + ',' + a + ')'; setTimeout("cvet20(x)",1) return a; }</script> <script> function cvet30(x){var x=0; x<256; x++; for (var a=0; a<256; a=Math.floor(window.setInterval(" ",1))+(Math.floor(window.setInterval(" ",1)))+(Math.floor(window.setInterval(" ",1)))); var color= 'rgb(' + a + ',' + a + ',' + a + ')'; setTimeout("cvet30(x)",1) return a; }</script> <script> function cvet40(x){var x=0; x<256; x++; for (var a=0; a<2000; a=Math.floor(window.setInterval(" ",1))+(Math.floor(window.setInterval(" ",1)))+(Math.floor(window.setInterval(" ",1)))+(Math.floor(window.setInterval(" ",1)))); var color= 'rgb(' + a + ',' + a + ',' + a + ')'; setTimeout("cvet40(x)",1) return a; }</script> <script> function zapusk1() { document.getElementById("cvet1").style.backgroundColor=cvet10(); document.getElementById("cvet2").style.backgroundColor=cvet20(); document.getElementById("cvet3").style.backgroundColor=cvet30(); document.getElementById("cvet4").style.backgroundColor=cvet40(); setTimeout('zapusk1()',1)} </script> <body OnLoad="zapusk1( )"></body></html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> - jsFiddle demo by holden321</title> <style type="text/css"> div { border: 0px solid black; width:50px; height:50px; float:left; margin: auto; text-align: center; } #log {text-align:right;} </style> <script type="text/javascript"> function zapusk(d) { if (!d.rgb) { d.rgb = 0; } s = (d.rgb).toString(16); while (s.length < 3) { s = '0' + s; } s = '#' + s; d.style.backgroundColor = s; //document.getElementById("log").innerHTML=s; d.rgb+= 1; if (d.rgb > 0xfff) d.rgb = 0; } window.onload=function(){ setInterval(function(){zapusk(document.getElementById('cvet1'))}, 100); setInterval(function(){zapusk(document.getElementById('cvet2'))}, 200); setInterval(function(){zapusk(document.getElementById('cvet3'))}, 300); setInterval(function(){zapusk(document.getElementById('cvet4'))}, 400); } </script> </head> <body> <div style="width:100px; height:100px; border:0px"> <div id="cvet1"></div> <div id="cvet2"></div> <div id="cvet3"></div> <div id="cvet4"></div> </div> <div id="log">#00131e</div> </body></html>