jQuery实现论坛发帖Demo

效果展示
思路
代码
改进空间

效果展示

思路

主要知识点：运用jQuery对HTML元素节点的操作(append)来添加帖子。
交互设计：用户点击页面上的“论坛发帖”按钮，出现表单，填写表单后点击“发帖”按钮，jQuery获取表单内容，创建新的节点（头像随机）来合成一个“帖子”，最终插入到当前页面的结尾。

代码

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>论坛发帖</title>
    <style>
        h2 {
            text-align: center;
            padding: 10px;
            background-color: cornflowerblue;
            border: 1px solid cornflowerblue;
            border-radius: 6px;
            color: white;
            margin-bottom: 30px;
            letter-spacing: 0.8em;
            cursor: pointer;
        }
        
        .post {
             50%;
            height: 400px;
            margin: 0 auto;
            border: 1px solid rgb(221, 221, 221);
            border-radius: 2px;
            display: none;
            position: absolute;
            top: 100px;
            background-color: white;
            left: 25%;
        }
        
        .title {
             87%;
            margin-left: 5%;
            margin-top: 20px;
            height: 2em;
            border: 1px solid rgb(230, 230, 230);
            padding-left: 1em;
        }
        
        .text {
             85%;
            margin-left: 5%;
            margin-top: 10px;
            height: 60%;
            border: 1px solid rgb(230, 230, 230);
            padding: 1em;
            font-size: 1.1em;
            overflow: auto;
        }
        
        .combtn {
             30%;
            margin-top: 10px;
            margin-left: 35%;
            height: 10%;
            border: 1px solid rgb(230, 230, 230);
            background-color: cornflowerblue;
            color: white;
            border-radius: 5px;
        }
        
        .comment_block {
            margin: 0 auto;
             50%;
            height: auto;
        }
        
        .touxiang {
             60px;
            height: 60px;
            float: left;
        }
        
        .touxiang img {
            border: 1px white solid;
            border-radius: 50%;
             100%;
            height: 100%;
        }
        
        .content {
            float: left;
             80%;
            margin-left: 3%;
            border: 1px solid rgb(221, 221, 221);
            padding: 1em;
            border-radius: 5px;
            height: auto;
            margin-bottom: 20px;
        }
        
        h4 {
            font-size: 1.2em;
            font-weight: normal;
            margin-top: 0;
            border-left: 6px solid cornflowerblue;
            padding-left: 3%;
            background-color: rgba(100, 149, 237, 0.2);
            border-radius: 5px;
            margin-bottom: 3%;
            font-family: '宋体';
        }
        
        .com_body {
            font-family: '宋体';
            color: darkgray;
            height: auto;
            clear: both;
             96%;
            margin: 0 auto;
            margin-bottom: 10px;
            /*text-indent: 2em;*/
        }
        
        .date {
             100%;
            text-align: right;
            font-size: 0.8em;
            color: rgb(114, 114, 114);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        ul {
            list-style: none;
        }
    </style>
</head>

<body>
    <div class="comment">
        <h2>论坛发帖</h2>
        <section>
            <ul></ul>
        </section>

        <div class="post">
            <input type="text" class="title" placeholder="请输入标题">
            <textarea class="text" placeholder="请输入评论"></textarea>
            <input type="button" value="发布评论" class="combtn">
        </div>

    </div>


    <script src="jquery-1.8.3.min.js"></script>
    <script>
        $(document).ready(function() {
            $("h2").click(function() {
                $(".post").show()
            })

            var tou = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg");

            $(".post .combtn").click(function() {
                var $newLi = $("<li></li>"); //创建一个新的li节点元素
                var iNum = Math.floor(Math.random() * 10); //随机获取头像
                var $block = $("<div class=comment_block></div>");
                var $touImg = $("<div class=touxiang><img src=stitch/" + tou[iNum] + "></div>"); //创建头像节点
                var $comment = $("<div class=content></div>");
                var $title = $("<h4>" + $(".title").val() + "</h4>"); //设置标题节点
                var $newComBody = $("<div class=com_body><pre>" + $(".text").val() + "</pre></div>"); //创建一个新的div节点元素

                var myDate = new Date();
                var currentDate = myDate.getFullYear() + "-" + parseInt(myDate.getMonth() + 1) + "-" + myDate.getDate() + " " + myDate.getHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds();
                var $newDate = $("<div class=date>" + currentDate + "</div>") //在div节点中插入发布时间；
                $($block).append($touImg); //插入头像
                $($comment).append($title); //插入标题

                $($comment).append($newComBody); //插入评论内容
                $($comment).append($newDate);
                $($block).append($comment);
                $($newLi).append($block);
                $(".comment section ul").append($newLi);

                $(".post .text").val("");
                $(".post .title").val("");
                $(".post").hide();
            })
        });
    </script>
</body>

</html>

头像素材如下：

改进空间

1.交互方面可以再做得精细些，比如用户不想发帖时可以隐藏发帖表单；
2.布局考虑响应式，字体大小使用相对单位；
3.添加删帖/按时间排序功能；