用jQuery写简单论坛

论坛

css

* {
            margin: 0;
            padding: 0;
            color: #333;
            font: 16px/1.2 Arial, Helvetica, sans-serif, "幼体";
            box-sizing: border-box;
        }

        .submit {
            border: none;
            padding: 2px 8px;
            border-radius: 3px;
            background-color: #F40;
            color: #EFEFEF;
            cursor: pointer;
            user-select: none;
        }

        .submit:active {
            background-color: #F20;
        }

        #comment {
            padding: 10px;
            width: 800px;
            margin: 100px auto 0;
            border: #DDD 1px solid;
        }

        .comment-reply {
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        .comment-content {
            margin-bottom: 10px;
            outline: none;
            border: #DDD 1px solid;
            padding: 10px;
            resize: none;
            width: 100%;
            height: 75px;
            overflow: hidden;
        }

        .item-content {
            display: flex;
            margin-bottom: 20px;
        }
        .content-title {
            padding: 0 10px;
            flex-basis: 80px;
            height: 100px;
            display: flex;
            flex-direction: column;
        }
        .title-icon {
            width: 60px;
            height: 60px;
            border-radius: 30px;
        }
        .title-nickname {
            text-align: center;
            margin-top: 10px;
        }
        .content-val {
            position: relative;
            flex-grow: 1;
            padding: 10px 10px 30px;
            border: #DDD 1px solid;
        }
        .val {
            text-align: justify;
        }
        .control {
            position: absolute;
            width: 97%;
            bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .time {
            font-size: 14px;
            color: #666;
        }
        .item-list {
            border: #DDD solid;
            border-width: 1px 1px 0;
            margin-bottom: 20px;
        }
        .list-item {
            border-bottom: #DDD 1px solid;
            padding: 10px;
        }
        .fromWho,
        .toWho {
            padding: 0 5px;
            color: #F40;
        }
        .toWho::before {
            content: "对";
            margin-right: 5px;
            color: #333;
        }
        .toWho::after {
            content: "说：";
            margin: 0 5px;
            color: #333;
        }

jQuery

<section id="comment">
    <div class="comment-reply">
        <textarea class="comment-content"></textarea>
        <span class="submit" data-level="0">发表评论</span>
    </div>
    <div class="comment-list"></div>
</section>
<script src="/js/jquery-3.2.1.min.js"></script>
<script>   
    function publish(e){
        return $(`<dl class="comment-item">
                <dt class="item-content">
                    <div class="content-title">
                        <img class="title-icon" src="${e.iconUrl}" alt="${e.nickName}头像">
                        <p class="title-nickname">${e.nickName}</p>
                    </div>
                    <div class="content-val">
                        <p class="val">
                            ${e.content}
                        </p>
                        <p class="control">
                            <span class="time">${e.time}</span>
                            <span class="submit">评论</span>
                        </p>
                    </div>
                </dt>
                <dd class="item-list"></dd>
            </dl>`);
    }
    let user = {
        userId:12301,
        iconUrl:"/icons/ljj.png",
        nickName:"老姐姐"
    };
    function now(){
        let now = new Date();
        now = [
                [
                    now.getFullYear(),
                    now.getMonth()+1,
                    now.getDate()
                ],[
                    now.getHours(),
                    now.getMinutes(),
                    now.getSeconds()
                ]
            ];
        now = [now[0].join("-"),now[1].join(":")];
        return now.join(" ");
    }
    $("#comment").on("click",".submit",function(){
        let level = $(this).data("level"),val;
        switch(level){
            case 0:
                val =  $(this).prev(".comment-content").val().trim();
                if(val.length==0){
                    alert("不能发表空帖");
                }
                user.content = val;
                user.time = now();
                $(".comment-list").append(publish(user));
                return;
        }
    });
    </script>