innerHTML的运用:新建层

最新推荐文章于 2024-07-12 16:27:40 发布

jacob1

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量770

点赞数

分类专栏： html技巧文章标签： function javascript bt class div c

html技巧专栏收录该内容

10 篇文章 0 订阅

订阅专栏

如我们把<span>或<div>写进innerHTML里，就可以新建层了。
看下面的例子。
程序是按窗口的大小建立相应数目的层；

--------------------------------------------------------------------------------
<html><head><title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">

</style>
<script language="JavaScript">
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>
n';
}
}
divc.innerHTML=str;
cursize-=speed;
if(cursize>0)setTimeout(cycle,1);
else(divc.innerHTML="");
}
function ol()
{
cycle();
}
</script>

</head>

<body bgcolor="#FFFFFF" text="#000000" background="http://www.oso.com.cn/image/logo.gif" οnlοad="ol();">
<p id=divc></p>
</body>
</html>

jacob1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
innerHTML的运用:新建层

如我们把或写进innerHTML里，就可以新建层了。看下面的例子。程序是按窗口的大小建立相应数目的层； -------------------------------------------------------------------------------- Example .maskdiv { background-color: #CCFF00; position: absolut
复制链接

扫一扫