首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

动态建立div效果如何实现

2013-09-05 
动态建立div效果怎么实现。div classoldstyle idlist_1a hrefjavascript: onClickjavascrip

动态建立div效果怎么实现。

<div class="oldstyle" id="list_1">
<a href="javascript:;" onClick="javascript:playload(0)">第1集</a>
</div>
<div class="oldstyle" id="list_2">
<a href="javascript:;" onClick="javascript:playload(1)">第2集</a>
</div>
<div class="oldstyle" id="list_3">
<a href="javascript:;" onClick="javascript:playload(2)">第3集</a>
</div>
<div class="oldstyle" id="list_4">
<a href="javascript:;" onClick="javascript:playload(3)">第4集</a>
</div>

要做一个视频频道用上面的代码,希望能实现根据给定的视屏集数建立div。也就是说如果视频是三十集就自动建立三十个<div class="oldstyle" id="list_1">
<a href="javascript:;" onClick="javascript:playload(0)">第1集</a>
</div>

[解决办法]
for(var i=0;i<len;i++){
var div=document.createElement('div');
div.onclick=function(){
....
}
document.body.appendChild(div);
}
试试
[解决办法]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 创建的DIV </title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
 
<style>.item{float:left;overflow:hidden;margin-left:8px;  
margin-top:10px;width:320px;height:250px;  
background-repeat:no-repeat;  
background-image:url(../images/bgred.jpg)}  
.curve{position:relative;width:320px;height:250px;  
z-index:1;left:75px;top:-40px;}  
</style>

<script language=javascript>
 function tcreatediv(cunt){
var a=0;

  for(var i=0;i<cunt;i++){
   var objdiv = document.createElement("DIV");
  
   var objname="list_" + i
   objdiv.id = objname;
   objdiv.style.top = 100 * i + 100;


   objdiv.style.left = 100 * i + 100;
   objdiv.style.background = '#FFFF00';
   objdiv.style.visibility = 'visible';
   objdiv.style.width = 100;
   objdiv.style.height = 80;
   objdiv.className ="oldstyle";
   a= i+1;
   objdiv.innerHTML="<a href='javascript:;' onClick='javascript:playload("+i+")' >第"+a+"集</a>";
   document.body.appendChild(objdiv);
   
  }
 }
</script>

</head>
<body>
cunt指创建的DIV个数  <br/>

<input id='creatdv' type=button value="create div" onclick="tcreatediv(30);">


</body>

</html>

热点排行