javaScript论坛实现和代码

CSS 代码：

        这个代码用的是内部引入

       

​
<style>
    *{
        padding: 0;
        margin: 0;
    }
    ul li{
        list-style: none;
    }
    .bbs{
        margin: 0 auto;
        width: 600px;
        position: relative;/*相对定位*/
    }
    header{
        border-bottom: 1px solid gray;
        padding: 5px 0;
    }
    header span{
        display: inline-block;
        width: 200px;
        height: 50px;
        color: #f9f9f9;
        background-color: green;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        line-height: 50px;
        border-radius: 5px;
        cursor: pointer;
    }
    .post{
        position: absolute;
        left: 65px;
        top: 70px;
        width: 500px;
        padding: 10px;
        font-size: 14px;
        z-index: 99;
        background-color: #f9f9f9;
        display: none;
    }
    .post .title{
        width: 450px;
        height: 30px;
        line-height: 30px;
        display: block;
        border: 1px solid gray;
        margin-bottom: 10px;
    }
    .post select{
        width: 200px;
        height: 30px;
    }
    .post .content{
        width: 450px;
        height: 200px;
        display: block;
        margin: 10px 0;
        border: 1px solid gray;
    }
    .post .btn{
        width: 160px;
        height: 35px;
        color: #f9f9f9;
        background: #009966;
        border: none;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        line-height: 35px;
        border-radius: 8px;
        cursor: pointer;
    }
    .bbs section ul li{
        padding: 10px 0;
        border-bottom: 1px #999999 dashed;
        overflow: hidden;
    }
    .bbs section ul li div{
        float: left;
        width: 60px;
        margin-left: 10px;
    }
    .bbs section ul li div img{
        border-radius: 50%;
        width: 60px;
    }
    .bbs section ul li h1{
        float: left;
        width: 520px;
        font-size: 16px;
        line-height: 35px;
    }
    .bbs section ul li p{
        color: #666666;
        line-height: 25px;
        font-size: 12px;
    }
    .bbs section ul li p span{
        padding-right: 20px;
    }
</style>

​

HTML代码：        

<div class="bbs">
    <header>
        <span onclick="post()">我要发帖</span>
    </header>
    <!--主体-->
    <section>
        <ul id="postList"> </ul>
    </section>
      <!--提交的表单-->
        <div class="post" id="post">
            <input type="text" placeholder="请输入标题（1~50个字符）"
               class="title" id="title" >
            所属板块：
            <select id="sec">
                <option>请选择板块</option>
                <option>电子书籍</option>
                <option>新课来了</option>
                <option>清扬</option>
                <option>笔记本</option>
            </select>
            <textarea class="content" id="content">
            </textarea>
            <input class="btn" value="发布"
            onclick="postSuccess()">
        </div>
</div>

script代码：

        

<script>
    function post() {
    document.getElementById("post").style.display="block"
    }
    /*发布按钮*/
    var touLisL = new Array("../img/tou01.jpg","../img/tou02.jpg","../img/tou03.jpg","../img/tou04.jpg")
    function postSuccess() {
        //第一个 头像
        //1.创建li元素
        var newLi = document.createElement("li");
        //2.获取0~3的随机数 floor 向下取整
        var iNum = Math.floor(Math.random()*4);
        //3.创建头像所在的Div节点
        var newDiv = document.createElement("div");
        //4.创建头像的img节点
        var newImg = document.createElement("img");
        //5.给img添加属性
        newImg.setAttribute("src",touLisL[iNum]);
        //6.将头像img 放到div中
        newDiv.appendChild(newImg);
        /*
        标题
        * */
        //创建标题所在的标签h1
        var titleH1 = document.createElement("h1");
        //2.获取标题
       var title = document.getElementById("title").value;
       //3.将标题放到H1标签中
        titleH1.innerHTML = title;
        /*
        * 板块 和 发布时间
        * */
        //1.创建一个p节点

        var newp = document.createElement("p");
        //2.创建一个span节点
       var newSpan= document.createElement("span")
       //3.获取板块值
       var secValue = document.getElementById("sec").value;
        //4.将板块放到span中
         newSpan.innerHTML = "板块："+secValue;
         //5.声明当前时间
        var myDate = new Date();
        //6.获取时间
        var currentDate = myDate.getFullYear()+"-"+parseInt(myDate.getMonth()+1)
        +"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes();
        //7.创建第二个span
        var secondSpan = document.createElement("span");
        //8.将时间放到span中
        secondSpan.innerHTML="发表时间:"+currentDate
        //9.将时间和板块插入到p标签中
        newp.appendChild(newSpan);
        newp.appendChild(secondSpan);
        /*
        * 完善li标签
        * */
        newLi.appendChild(newDiv);//头像
        newLi.appendChild(titleH1);//标题
        newLi.appendChild(newp);//包含了板块和时间的p标签
       var postList = document.getElementById("postList");
       //将当前内容插入到列表最前面
        postList.insertBefore(newLi,postList.firstChild);
        //清空标题
      document.getElementById("title").value="";
        //清空内容
        document.getElementById("content").value="";
        //将表单隐藏
            document.getElementById("post").style.display="none"
    }
</script>