首頁 > html教程 > HTML熱點 閱讀:0更新時間:2020-12-20 09:49:40

用hml5實現留言功能

? ? ? ?在web頁面設計中,留言是個很常用的功能。根據設計需求,留言又可以分成簡單留言和可回復(即可蓋樓)留言。下面根據我在具體項目中的使用介紹這兩種留言的實現方式。

1.簡單留言

? ? ??

圖1

? ? ? ?簡單評論如上圖所示,不需要具備回復功能,上圖頁面地址:簡單留言板。這個留言是使用js動態加載的。

? ? ? ?html代碼如下:


發布

    js代碼如下:

     getOnePageMessage(id ,messagePage);


    function getOnePageMessage(id, page){
            var onePageMessageTmp;
        var messagePageCount;
        isLoading = false;
        $.ajax({
            url : serverPrefix + "/wbLeaveMessage/getLeaveMessage",
            type : "get",
            dataType: "json",
            data: {
                wbId: id,
                messageType: 1,
                page: page,
                pageSize: 10
            },
            success : function (data) {
                if (data.code == 0){
                    messagePageCount = data.result.pageCount;
                    onePageMessageTmp = data.result.leaveMessages;
                    if ((onePageMessageTmp.length == 0) || (messagePageCount == 1)) {       // 無數據或只有一頁數據,隱藏加載提示
                        $("#loading").hide();
                    }
                    if (onePageMessageTmp.length != 0) {
                        addMessage(onePageMessageTmp);
                        isLoading = true;
                    }
                }
                else{
                    onePageMessageTmp.length = 0;
                    $("#loading").hide();
                }
            }
        });
    }

    function addMessage(leaveMessages){
        var template = "";
        var html = "";
        for (var i = 0; i < leaveMessages.length; i++){
            template = '
  • '; template += ' '; template += '

  • 上面的代碼不算很復雜,思路就是先通過getOnePageMessage()函數從服務端獲取到歷史評論數據,在ajax通信的success函數里,調用addMessage()函數,addMessage()函數就是一個js模板,關于js模板動態加載頁面內容的詳細介紹,請見我的另外一篇博客:通過js和模板動態加載html頁面。
        對于這個簡單評論,還有一個難點就是CSS該如何寫?才能達到圖1中的效果。下面給出CSS代碼。
    .commentList li:first-child {
        border-top: 1px solid #eee;
    }
    .commentList .item {
        font-size: 1rem;
    }
    .commentList li {
        position: relative;
        border-bottom: 1px solid #eee;
        padding: 10px 0;
    }
    .item {
        text-align: left;
        cursor: pointer;
    }
    
    li {
        display: list-item;
    }

    .item .pic {
        float: left;
        margin-right: 10px;
    }
    div, a, p, ul, li, img, span {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .item .info {
        overflow: hidden;
    }

    .commentList .name {
        float: left;
    }

    .commentList .time {
        float: right;
        color: #666;
    }

    .commentList .content {
        clear: both;
        color: #666;
        width: 100%;
        font-size: 1.5rem;
        display: inline-block;
        line-height: 28px;
    }


    2.可蓋樓留言


    圖2

    ? ? ? ?可蓋樓評論如圖2所示。實現方式大部分和簡單評論中的一樣,唯一不同的是從服務端返回的數據中有了源評論這個字段,需要在js模板中添加對源評論拼接字符串的代碼。下面只給出不同的代碼。

    ? ? ? ?js代碼如下:

    /**
     * 添加評論列表,帶蓋樓功能(即源評論)
     * @param list 評論列表
     * @param parent html模板要加載到的父級元素
     * @param pullDirection 加載方式?!皍p”:對應上拉評論動作,加載在父元素后面;“down”:對應下拉評論動作,加載在父元素前面
     */
    function addComment(list, parent, pullDirection) {
        var template = "";
        var html = "";
        var innerTemplate = "";
        var innerHtml = "";
        var buttonTemplate = "";
    
        template  = '
  • '; // 評論模板 template += ' '; template += ' '; %20%20%20%20template%20+=%20'%20%20%20'; %20%20%20%20template%20+=%20'%20%20%20'; %20%20%20%20template%20+=%20'%20%20%20%20%20%20%20{fullname}'; %20%20%20%20template%20+=%20'%20%20%20%20%20%20%20{createtime}'; %20%20%20%20template%20+=%20'%20%20%20%20%20%20%20'; %20%20%20%20template%20+=%20'%20%20%20%20%20%20%20{content}'; %20%20%20%20template%20+=%20'%20%20%20%20%20%20%20'; %20%20%20%20template%20+=%20'%20%20%20'; %20%20%20%20template%20+=%20'
  • '; %20%20%20%20$(list).each(function%20(i)%20{%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20//%20加載評論 %20%20%20%20%20%20%20%20var%20item%20=%20list[i]; %20%20%20%20%20%20%20%20var%20timestamp%20=item.createtime;%20%20%20%20%20%20%20%20%20%20%20//%20時間戳設置為北京時間 %20%20%20%20%20%20%20%20item.createtime%20=%20formatDate(timestamp); %20%20%20%20%20%20%20%20var%20userimg%20=%20item.userimg;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20//%20如果headImgUrl等于null,替換為默認路徑 %20%20%20%20%20%20%20%20if%20(userimg%20==%20null){ %20%20%20%20%20%20%20%20%20%20%20%20item.userimg%20=%20"headPortrait/default_head_img.png"; } html += template.formatString(item); }); if (pullDirection == "up") { $(parent).append(html); } else { $(parent).prepend(html); } // if ($(parent).attr("class") == "direct-broadcast-list") { // 如果是直播間列表,需要在列表中添加“上榜”、“置頂”按鈕 // buttonTemplate = '置頂'; // buttonTemplate += '上榜'; // $(parent).find(".name").after(buttonTemplate); // } $(list).each(function (i) { // 加載源評論 var srcContent = list[i].srcContent; var commentId = list[i].id; if (srcContent != null) { innerHtml = ""; $(srcContent).each(function (j) { innerTemplate = '
  • '; // 源評論模板 innerTemplate += ' {name}'; innerTemplate += ' ' + parseInt(j + 1) + '樓'; innerTemplate += ' {content}'; innerTemplate += '
  • '; innerHtml += innerTemplate.formatString(srcContent[j]); }); $("#src-comment-" + commentId).html(innerHtml); } if (list[i].imgs != null) { var imgSrc = imagesPrefix + list[i].imgs[0]; $("#small-img-" + commentId).html(''); } }); } /** * 字符串格式化,用于在模板中注入值 * 例:var s = "id={id}".formatString(obj); * @param obj 對象 * @returns {string} 注入后的字符串 */ String.prototype.formatString = function (obj) { var reg = /{([^{}]+)}/gm; return this.replace(reg, function (match, name) { return obj[name]; }); }


    beylze編程學院,一個分享編程知識和seo優化知識的網站。跟著beylze一起學習,每天都有進步。

    通俗易懂,深入淺出,一篇文章只講一個知識點。

    文章不深奧,不需要鉆研,在公交、在地鐵、在廁所都可以閱讀,隨時隨地漲姿勢。

    文章不涉及代碼,不燒腦細胞,人人都可以學習。

    當你決定關注beylze(公眾號:beylze),你已然超越了90%的其他從業者!

    相關文章

    優秀教程

    国产亚洲欧美日韩