jQuery实现论坛发帖Demo

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

效果展示

思路

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

代码

完整代码如下：

    
    
    
    



    

        
论坛发帖
        

            

        

        

            
            
            
        

    


    
    

头像素材如下：

改进空间

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