[实用技巧]innerHTML的运用:新建层

如我们把<span>或<div>写进innerHTML里，就可以新建层了。

看下面的例子。

程序是按窗口的大小建立相应数目的层；

--------------------------------------------------------------------------------

<html><head><title>Example</title>

<!--

.maskdiv { background-color: #CCFF00; position: absolute; z-index: 9; clip: rect( )}

-->

</style>

var speed=4;

var size=128;

var cursize=size+speed*4;//延期4秒

function toabcbase(num)

{

var charset=new Array('a','b','c','d','e','f','g','h','i','j');

return charset[num];

}

function toabc(num)

{

var str="";

var tmp=num;

if(!num)return toabcbase(0);

while(tmp>0)

{

str=toabcbase(tmp%10)+str;

tmp=(tmp-tmp%10)/10;

}

return str;

}

function cycle()

{

var str="";

var bw=document.body.clientWidth;

var bh=document.body.clientHeight;

var bt=document.body.scrollTop;

var bl=document.body.scroolLeft;

var cw=(bw-bw%size)/size+1;

var ch=(bh-bh%size)/size+1;

for(var w=0;w<cw;w++)

{

for(var h=0;h<ch;h++)

{

str+='<span class=maskdiv id="mask';

str+=toabc(w);

str+='x';

str+=toabc(h);

str+='" style="width=';

str+=cursize;

str+='px ;height=';

str+=cursize;

str+='px ;left=';

str+=w*size+(size-cursize)/2

str+='px ;top=';

str+=h*size+(size-cursize)/2;

str+='px "></span>';

}

divc.innerHTML=str;

cursize-=speed;

if(cursize>0)setTimeout(cycle,1);

else(divc.innerHTML="");

}

function ol()

{

cycle();

}

</script>

</head>

</body>

</html>