您的位置：首页 > Web前端 > JavaScript

利用js-对象实现简单的动态论坛页面

2017-09-12 22:09 627 查看

以js中的对象Object为数据容器，模拟动态的论坛页面：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/initialize.css"/>
<title>BBS页面</title>
<style type="text/css">
body{
background-color: #D6D2C2;
}
.total{
width: 800px;
min-height:200px;
background-color: white;
margin: 10px auto;
border-radius: 5px;
overflow: hidden;
}
.nav ul{
width: 100%;
background-color: #F5F5F5;
border-radius: 5px;
}
.nav ul li{
float: left;
width:5% ;
height: 55px;
line-height: 55px;
padding-left: 20px;
}
.nav ul li a{
color: #4DBD53;
}
.container{
width:800px;
min-height: 45px;
}
.container div:hover{
background-color: #F5F5F5;
}
</style>
</head>
<body>
<div class="total">

<div class="nav">

<ul class="clear other">
<li><a href="#">全部</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 id="BBSDiv" class="container"></div>
</div>

<script>
//论坛数据
var luntanData={
"icon":["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg","../img/6.jpg","../img/7.jpg","../img/8.jpg","../img/9.jpg","../img/10.jpg","../img/b1.jpg","../img/b2.jpg","../img/b3.jpg","../img/b4.jpg","../img/b5.jpg","../img/b6.jpg","../img/b7.jpg","../img/b8.jpg","../img/b9.jpg","../img/b10.jpg"],
"zhiding":["置顶","精华","分享","问答","招聘","置顶","精华","分享","问答","招聘","置顶","精华","分享","问答","招聘","置顶","精华","分享","问答","招聘"],
"title":["[深圳]NodeParty 2016.04.09 总结", "cnode 社区也切换到 Let's encrypt 了", "国内Nodejs 2015汇总", "展望Nodejs 2016和新年祝
4000
福", "展望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小时以前"],
"url":["https://cnodejs.org/topic/5696e43e6272216e51bff67e","https://cnodejs.org/topic/574453cd754d17df1e44d9a4","https://cnodejs.org/topic/572afb6b15c24e592c16e1e6","https://cnodejs.org/topic/574e4b7479caf4c12f99e9db","https://cnodejs.org/topic/574e4b7479caf4c12f99e9db","https://cnodejs.org/topic/572afb6b15c24e592c16e1e6","https://cnodejs.org/topic/572afb6b15c24e592c16e1e6","https://cnodejs.org/topic/574453cd754d17df1e44d9a4","https://cnodejs.org/topic/574453cd754d17df1e44d9a4","https://cnodejs.org/topic/574453cd754d17df1e44d9a4","https://cnodejs.org/topic/5696e43e6272216e51bff67e","https://cnodejs.org/topic/5696e43e6272216e51bff67e","https://cnodejs.org/topic/5696e43e6272216e51bff67e","https://cnodejs.org/topic/5696e43e6272216e51bff67e","https://cnodejs.org/topic/574eb1e01176fe255bb8d79c","https://cnodejs.org/topic/574eb1e01176fe255bb8d79c","https://cnodejs.org/topic/574eb1e01176fe255bb8d79c","https://cnodejs.org/topic/574eb1e01176fe255bb8d79c","https://cnodejs.org/topic/574eb1e01176fe255bb8d79c"]
};

var divContent=document.getElementById('BBSDiv');
var tempContent='';
var imgStyle='width: 45px;height: 45px;border-radius: 5px; vertical-align: middle';
var spanStyle1='display: inline-block;margin: 0 20px;';
var rnd= Math.floor(Math.random() * 100) + "/" + Math.floor(Math.random() * 10000);
var divStyle='width: 100%;height: 45px;border-bottom: 1px solid #F5F5F5;padding: 5px;position:relative;';
var spanStyle2='display: inline-block;width: 35px;height: 40px;border-radius: 5px;background-color: #FD7738;line-height: 40px;text-align: center;color: white;';
for(var index=0;index<luntanData.icon.length;index++){
tempContent+= '<div style="'+divStyle+'">'+'<img src="'+luntanData.icon[index]+'" alt="" style="'+imgStyle+'"/>'+' <span style="'+spanStyle1+'">'+rnd+'</span>'+' <span style="'+spanStyle2+'">'+luntanData.zhiding[index]+'</span>'+'<a href="'+luntanData.url[index]+'" style="margin: 0 20px;">'+luntanData.title[index]+'</a>'+ '<span style="position: absolute;right: 50px;top: 15px;">'+luntanData.time[index]+'</span>'+'</div>';
}
divContent.innerHTML=tempContent;
</script>

</body>
</html>css代码：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background:#fff; color:#767777; font-size: 14px; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
a { color:#555; text-decoration:none; }
a:hover { text-decoration:underline; }
img { border:none; }
ol,ul,li { list-style:none; }
li a:hover{ text-decoration: none; color:#e87362; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; border: 1px solid #999; }
input{outline:none;}
table { border-collapse:collapse; }
.clear:after{content:"";display:block;clear:both;}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航