目的是让一个DIV小格子在页面中跑起来并且变色
1 <style> 2 * { 3 margin: 0px; 4 padding: 0px; 5 } 6 7 #DIV1 { 8 position: relative; 9 width: 50px; 10 height: 50px; 11 background-color: red; 12 } 13 </style> 14 </head> 15 <body> 16 <form id="form1" runat="server"> 17 <div id="DIV1"></div> 18 </form> 19 </body> 20 </html> 21 <script> 22 var C = new Array();//定义一个数组放置颜色 23 C[0] = 'green'; 24 C[1] = 'yellow'; 25 C[2] = 'black'; 26 C[3] = 'navy'; 27 C[4] = 'blue'; 28 C[5] = 'red'; 29 var num = 0;//设置一个变量记录颜色变化的次数以及取颜色在数组中所对应的索引 30 var num1 = 0;//设置几个变量记录函数的执行次数 31 var div = document.getElementById('DIV1');//获取DIV 32 function F() { 33 if (num1 % 10 == 0) {//控制颜色的变化速度 34 div.style.backgroundColor = C[num];//改变颜色 35 num++; 36 if (num == C.length) { 37 num = 0;//颜色变化次数达到数组长度时归零重新记录 38 } 39 } 40 div.style.left = div.offsetLeft + 10 + 'px';//DIV横向移动10个像素 41 if (div.offsetLeft > 1300) {//移动1300像素时换行加横向位置归零 42 div.style.left = 0 + 'px'; 43 div.style.top = div.offsetTop + 50 + 'px'; 44 } 45 if (div.offsetTop > 500) {//纵向达到500时DIV回到原点 46 div.style.left = 0 + 'px'; 47 div.style.top = 0 + 'px'; 48 } 49 num1++; 50 } 51 window.setInterval('F()', 20);//每20毫秒执行一次函数 52 </script>
