javascript 动态创建元素和数据

最新推荐文章于 2022-06-11 19:21:45 发布

Sunny_can

最新推荐文章于 2022-06-11 19:21:45 发布

阅读量269

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/can_Sunshine/article/details/52662416

版权

javascript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*height:2090px;*/
body{background: #e1e1e1;}
.all{ width:910px;margin: 0px auto;background:#fff;}
.nav{width:910px;height:40px;background: #f6f6f6; }
.nav ul{}
.nav ul li{list-style:none;float: left;line-height: 40px;padding: 0px 20px;}
.nav ul li a{ text-decoration:none;color:#80bd01;}
.nav ul li a:hover{color:#08c;}
.nav ul li #qb{padding:3px 4px;background:#80bd01;color:#fff;border-radius:3px; }

.con .d1:hover{background: #f5f5f5;}
.con .title{text-decoration:none;position:absolute;left:180px;top:15px;color:#333;font-size: 16px;}
.con .title:hover{text-decoration: underline;}
</style>
</head>
<body>

<div class="all">
<div class="nav">
<ul>
<li><a href="" id="qb">全部</a> </li>
<li><a href="">精华</a> </li>
<li><a href="">分享</a> </li>
<li><a href="">问答</a> </li>
<li><a href="">招聘</a> </li>
</ul>
</div>
<div class="con" id="con">



</div>
</div>

<script>
var luntanData = {
"icon": ["pic/1.jpg", "pic/2.jpg", "pic/3.jpg", "pic/4.jpg", "pic/5.jpg", "pic/6.jpg", "pic/7.jpg", "pic/8.jpg", "pic/9.jpg", "pic/10.jpg", "pic/b1.jpg", "pic/b2.jpg", "pic/b3.jpg", "pic/b4.jpg", "pic/b5.jpg", "pic/b6.jpg", "pic/b7.jpg", "pic/b8.jpg", "pic/b9.jpg", "pic/b10.jpg"],
"zhiding": ["置顶", "精华", "分享", "问答", "招聘", "置顶", "精华", "分享", "问答", "招聘", "置顶", "精华", "分享", "问答", "招聘", "置顶", "精华", "分享", "问答", "招聘"],
"title": ["[深圳]NodeParty 2016.04.09 总结", "cnode 社区也切换到 Let's encrypt 了", "国内Nodejs 2015汇总", "展望Nodejs 2016和新年祝福", "展望Nodejs 2016和新年祝福", " 2016和新年祝福", "展望Nodejs 2016和新年祝福", " 2016和新年祝福", "展望Nodejs 2016和新年祝福", "展望Nodejs 2016和新年祝福", "[深圳]NodeParty 2016.04.09 总结", "cnode 社区也切换到 Let's encrypt 了", "国内Nodejs 2015汇总", "展望Nodejs 2016和新年祝福", "展望Nodejs 2016和新年祝福", " 2016和新年祝福", "展望Nodejs 2016和新年祝福", " 2016和新年祝福", "展望Nodejs 2016和新年祝福", "展望Nodejs 2016和新年祝福"],
"time": ["4小时以前", "3小时以前", "4小时以前", "9小时以前", "4小时以前", "6小时以前", "2小时以前", "4小时以前", "4小时以前", "4小时以前", "4小时以前", "3小时以前", "4小时以前", "9小时以前", "4小时以前", "6小时以前", "2小时以前", "4小时以前", "4小时以前", "4小时以前"]
};

var con=document.getElementById("con");
function create(ele,parent,classname){
var biaoqian = document.createElement(ele);
if(classname){
biaoqian.className=classname;
}
parent.appendChild(biaoqian);
return biaoqian;
}
for(var i=0;i<luntanData.icon.length;i++){
var dd =create("div",con,"d1");
dd.setAttribute("style","height:50px;border-bottom:1px solid #f6f6f6;position:relative;");

var img =create("img",dd,"imga");
img.setAttribute("style","width:38px;height:38px;position:absolute;left:5px;top:7px;");
img.src =luntanData.icon[i];

var span1=create("span",dd);
var front=Math.floor(Math.random()*100);
var rear =Math.floor(Math.random()*900+100);
span1.innerHTML=front+"/"+rear;
span1.setAttribute("style","position:absolute;left:60px;top:18px;font-size:14px;color:#9e78c0");

var span2=create("span",dd);
span2.setAttribute("style","position:absolute;left:130px;top:15px;background:#80bd01;color:#fff;font-size:12px;padding:3px 4px;");
span2.innerHTML =luntanData.zhiding[i];

var a=create("a",dd);
a.href="#";
a.className="title";
a.innerHTML =luntanData.title[i];

var time=create("span",dd);
time.setAttribute("style","position:absolute;right:30px;top:19px;color:#777;font-size:12px;");
time.innerHTML =luntanData.time[i];

}

</script>

</body>
</html>

Sunny_can

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 动态创建元素和数据

/*height:2090px;*/ body{background: #e1e1e1;} .all{ width:910px;margin: 0px auto;background:#fff;} .nav{width:910px;height:40px;background: #f6f6f6; } .nav ul{}
复制链接

扫一扫