用js制作论坛发贴

需求说明
单击我要发贴，弹出发贴界面
在标题框中输入标题，选择所属版块，输入帖子内容
单击“发布”按钮，新发布的帖子显示在列表的第一个，新帖子显示头像、标题、版块和发布时间
使用数组保存发帖者的头像
使用函数floor( )和random( )随机获取发帖者的头像
使用appendChild ( )把头像、标题、版块、时间插入到页面中
设置value值为空来清空当前输入框中的内容
使用style属性隐藏发新贴界面

<div class="bbs">
    <header><span onclick="fa()">我要发帖</span></header>
    <section>
        <ul></ul>
    </section>
    <div class="post" id="post1">
        <input id="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布" onclick="chu()">
    </div>
</div>

function fa() {
    document.getElementById("post1").style.display = "block";
}
function touxiang() {
    var tou = new Array("tou01.jpg", "tou02.jpg", "tou03.jpg", "tou04.jpg");
    var sui = parseInt(Math.random() * 4);
    return tou[sui];
}
function chu() {
    document.getElementById("post1").style.display = "none";
    var s = document.getElementsByTagName("ul")[0];
    var a = document.createElement("li");
    var b = document.createElement("div");
    var c = document.createElement("img");
    var d = document.createElement("h1");
    var e = document.createElement("p");
    var f = document.createElement("span");
    s.appendChild(a);
    a.className = ".bbs section ul li";
    a.appendChild(b);
    b.className = ".bbs section ul li div";
    b.appendChild(c);
    c.className = ".bbs section ul li div img";
    c.src = "images/" + touxiang();
    a.appendChild(d);
    d.className = ".bbs section ul li h1";
    d.innerHTML = document.getElementById("title").value;
    a.appendChild(e);
    e.className = ".bbs section ul li p";
    e.innerHTML = "版块：" + document.getElementsByTagName("select")[0].value;
    e.appendChild(f);
    f.className = ".bbs section ul li p span";
    var today = new Date();
    var nian = today.getFullYear();
    var yue = today.getMonth() + 1;
    var ri = today.getDate();
    var shi = today.getHours();
    var fen = today.getMinutes();
    var miao = today.getSeconds();
    f.innerHTML = "发表时间：" + nian + "-" + yue + "-" + ri + " " + shi + ":" + fen + ":" + miao;
    document.getElementById("title").value = "";
    document.getElementsByTagName("select")[0].value = "";
    s.insertBefore(a, s.firstElementChild);
}

*{margin: 0; padding: 0; font-family: "Arial", "微软雅黑";}
ul,li{list-style: none;}
.bbs{margin: 0 auto; width: 600px; position: relative;}
header{padding: 5px 0; border-bottom: 1px solid #cecece;}
header span{display:inline-block; width: 220px; height: 50px; color: #fff; background: #009966; font-size: 18px; font-weight: bold; text-align: center;line-height: 50px; border-radius: 8px; cursor: pointer;}
.post{position: absolute; background: #ffffff; border: 1px #cccccc solid; width: 500px; left: 65px; top:70px; padding: 10px; font-size: 14px; z-index: 999999; display: none;}
.post .title{width: 450px; height:30px; line-height: 30px; display: block; border: 1px #cecece solid; margin-bottom: 10px;}
.post select{width: 200px; height: 30px;}
.post .content{width: 450px; height: 200px; display: block; margin: 10px 0;border: 1px #cecece solid;}
.post .btn{width: 160px; height: 35px; color: #fff; 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-right: 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;}

因为是四张图片随机产生，数组下标我取得是0-3；如果是多张，用Math方法时后边乘以几就行了。