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

最新推荐文章于 2023-04-03 21:40:05 发布

...lemon_...

最新推荐文章于 2023-04-03 21:40:05 发布

阅读量780

点赞数

分类专栏： frontEnd

本文链接：https://blog.csdn.net/qianqianNingmeng/article/details/77950420

版权

frontEnd 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

以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和新年祝福", "展望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;}