<script type="text/javascript"> //全局数组--用来保存所选中div的id var arr = new Array(); var arr_new = new Array(); var num =0; var num1= 0; var num2 =0; var num3 =0; var num4 =0; var _second =0; var setIntervalid = null; var color_array = ["red","blue","yellow","black","green","white"]; var _arr = ["5-9","6-9","7-9","8-9","9-9","10-9","11-9","5-13","5-14","5-15","6-15","7-15","8-15","8-14","8-13","9-13","10-13","11-13","11-14","11-15","5-19","5-20","5-21","6-21","7-21","8-21","9-21","10-21","11-21","11-20","11-19","8-19","8-20","5-25","6-25","7-25","8-25","8-26","8-27","9-27","10-27","11-27","7-27","6-27","5-27"]; var _Nextarr = ["5-9","5-10","5-11","6-9","7-9","8-9","8-10","8-11","9-11","10-11","11-11","11-10","11-9","5-15","5-16","5-17","6-15","7-15","8-15","8-16","8-17","9-17","9-15","10-15","11-15","11-16","11-17","10-17","5-21","5-22","5-23","6-23","7-23","8-23","9-23","10-23","11-23","5-27","6-27","7-27","8-27","8-28","8-29","7-29","6-29","5-29","5-28","9-27","10-27","11-27","11-28","11-29","10-29","9-29"]; function test() { //创建textbox来动态显示选中的位置 var oText = document.createElement("input"); oText.setAttribute("type","text") oText.id = "txt_msg"; oText.style.position = "absolute"; oText.style.width = 80; oText.style.top = 5; oText.style.left = 1000; document.body.appendChild(oText);
//全局数组--用来保存所选中div的id
var arr = new Array();
var arr_new = new Array();
var num =0;
var num1= 0;
var num2 =0;
var num3 =0;
var num4 =0;
var _second =0;
var setIntervalid = null;
var color_array = ["red","blue","yellow","black","green","white"];
var _arr = ["5-9","6-9","7-9","8-9","9-9","10-9","11-9","5-13","5-14","5-15","6-15","7-15","8-15","8-14","8-13","9-13","10-13","11-13","11-14","11-15","5-19","5-20","5-21","6-21","7-21","8-21","9-21","10-21","11-21","11-20","11-19","8-19","8-20","5-25","6-25","7-25","8-25","8-26","8-27","9-27","10-27","11-27","7-27","6-27","5-27"];
var _Nextarr = ["5-9","5-10","5-11","6-9","7-9","8-9","8-10","8-11","9-11","10-11","11-11","11-10","11-9","5-15","5-16","5-17","6-15","7-15","8-15","8-16","8-17","9-17","9-15","10-15","11-15","11-16","11-17","10-17","5-21","5-22","5-23","6-23","7-23","8-23","9-23","10-23","11-23","5-27","6-27","7-27","8-27","8-28","8-29","7-29","6-29","5-29","5-28","9-27","10-27","11-27","11-28","11-29","10-29","9-29"]; function test()
{
//创建textbox来动态显示选中的位置
var oText = document.createElement("input");
oText.setAttribute("type","text")
oText.id = "txt_msg";
oText.style.position = "absolute";
oText.style.width = 80;
oText.style.top = 5;
oText.style.left = 1000;
document.body.appendChild(oText);
//创建btn测试
var obtn =document.createElement("input");
obtn.setAttribute("type","button");
obtn.setAttribute("value","测试按钮");
obtn.id = "btn_ok";
obtn.style.position = "absolute";
obtn.style.top = 25;
obtn.style.left = 1000;
obtn.onclick = clickTest;
document.body.appendChild(obtn);
//创建闪闪按钮
var obtn1 =document.createElement("input");
obtn1.setAttribute("type","button");
obtn1.setAttribute("value","闪闪按钮");
obtn1.id = "btn_ok1";
obtn1.style.position = "absolute";
obtn1.style.top = 50;
obtn1.style.left = 1000;
obtn1.onclick =function() {setInterval(newflashTest,50);}
document.body.appendChild(obtn1);
//创建跑步按钮
var obtn2 =document.createElement("input");
obtn2.setAttribute("type","button");
obtn2.setAttribute("value","跑步按钮");
obtn2.id = "btn_ok2";
obtn2.style.position = "absolute";
obtn2.style.top = 75;
obtn2.style.left = 1000;
obtn2.onclick =function() {setInterval(flashTest,50);}
document.body.appendChild(obtn2);
//创建全体跑步按钮
var obtn3 =document.createElement("input");
obtn3.setAttribute("type","button");
obtn3.setAttribute("value","全体按钮");
obtn3.id = "btn_ok3";
obtn3.style.position = "absolute";
obtn3.style.top = 100;
obtn3.style.left = 1000;
obtn3.onclick = function() {setInterval(runTest,100);}
document.body.appendChild(obtn3);
//创建跑步填充按钮
var obtn4 =document.createElement("input");
obtn4.setAttribute("type","button");
obtn4.setAttribute("value","填充按钮");
obtn4.id = "btn_ok4";
obtn4.style.position = "absolute";
obtn4.style.top = 125;
obtn4.style.left = 1000;
obtn4.onclick = function() {setInterval(run,10);}
document.body.appendChild(obtn4);
for(var i =0;i<20;i++)
{
for(var j=0;j<40;j++)
{
var o = document.createElement("div");
o.id = i + "-" + j;
o.style.width = 20;
o.style.height = 20;
o.style.backgroundColor = "white";
o.style.border = "1px solid black";
o.style.top = (i* 25 ) + 5 + "px";
o.style.left = (j * 25) + 5 + "px";
o.style.position = "absolute";
document.body.appendChild(o);
o.onmouseover = function()
{
//this.style.backgroundColor="white";
var msg = document.getElementById("txt_msg");
msg.value = this.id;
}
o.onclick = function()
{
this.style.backgroundColor="red";
//保存点击所选中的ID
arr.push(this.id);
//alert(arr.toString());
}
}
}
}
function clickTest()
{
for(var i = 0;i<arr.length;i++)
{
var obj = document.getElementById(arr[i]);
obj.style.backgroundColor="blue";
}
} function flashTest()
{
if(num >= arr.length)
{
num = 0;
}
for(var i = 0;i<arr.length;i++)
{
var obj = document.getElementById(arr[i]); if(num == i)
{
obj.style.backgroundColor="blue";
}
else
{
obj.style.backgroundColor="yellow";
}
}
num++;
}
function newflashTest()
{
if(num1 >= arr.length)
{
num1 = 0;
}
for(var i = 0;i<arr.length;i++)
{
var obj = document.getElementById(arr[i]);
//全部闪闪
if(num1%2 ==0 && i%2 ==0)
{
obj.style.backgroundColor="blue";
}
if(num1%3 ==0)
{
obj.style.backgroundColor="yellow";
}
if(num1%5 ==0)
{
obj.style.backgroundColor="black";
}
}
num1++;
}
//一列跑过去
function runTest()
{
if(num2 == 40)
{
num2 = 0;
}
var nh_row = num2; // current - row max(20)
var nv_column = num2; // current - column
// h
if(num2 >= 20){
nh_row = num2 - 20;
}
for(var r = 0;r<20;r++){
for(var c = 0;c<40;c++){
var obj = document.getElementById(r +"-"+c);
if(r == nh_row && c == nv_column){
obj.style.backgroundColor="yellow"; //交叉点的颜色
}else if(r == nh_row){
obj.style.backgroundColor="red"; //行的颜色
}else if(c == nv_column){
obj.style.backgroundColor="blue"; //列的颜色
}else{
obj.style.backgroundColor="white"; //其他颜色
}
}
}
num2++;
}
//标识最后行，需要颜色填充的
var targetColumn = 39; //填充颜色
function run()
{
_second ++;
if(targetColumn <0 )
{
return;
}
//填充
if(num3 > targetColumn)
{
// ready to next
targetColumn--;
num3 =0;
if(targetColumn ==0)
{
setIntervalid = setInterval("effulge(_arr);",50);
//result();
}
return;
}
for(var i =0;i<20;i++)
{
//alert(num3);
for(var j=0;j<=num3;j++)
{
var obj = document.getElementById(i +"-"+j);
if(num3 == j)
{
obj.style.backgroundColor="green";
}
else
{
obj.style.backgroundColor="white";
}
}
}
num3++;
}
//从arr_new数组查找某个div的ID的具体位置
function serach(_id)
{
for(var i =0;i<20;i++)
{
for(var j=0;j<40;j++)
{
arr_new.push(i+"-"+j);
}
}
for(var x =0;x<arr_new.length;x++)
{
if(_id ==arr_new[x])
{
return x;
}
else
{
return;
}
}
}
//记录需要闪的ID
function effulge(arrNum)
{
if(num4 >= arrNum.length)
{
num4 = 0;
}
for(var i = 0;i<arrNum.length;i++)
{
//alert(_arr.length);
var obj = document.getElementById(arrNum[i]);
var fillColor = color_array[Math.floor(Math.random()*6)];
if(num4%2 ==0 && i%2 ==0)
{
obj.style.backgroundColor=fillColor;
}
if(num4%3 ==0)
{
obj.style.backgroundColor=fillColor;
}
if(num4%5 ==0)
{
obj.style.backgroundColor=fillColor;
}
}
num4++;
}
// //clearMothed
// function clearAll()
// {
// for(var i= 0;i<20;i++)
// {
// for(var j=0;j<40;j++)
// {
// var obj = document.getElementById(i +"-"+j);
// obj.style.backgroundColor = "green";
// }
// }
// clearInterval(setIntervalid);
// }
//
// function result()
// {
// for(var i=0;i<100000;i++)
// {
// if(i==9999)
// {
// clearAll();
// NextsetIntervalid = setInterval("effulge(_Nextarr);",50);
// }
// }
// }
test();
//alert(_Nextarr.length);
//setInterval("effulge(_Nextarr);",50);
</script>
我还有些自己乱想出来的效果 用JS写的看大家需求。。需求就贴源码。。