用原生js写一个微博发布框，留言框。

﹏ヽ暗。殇╰゛Y 2022-07-13 04:19 155阅读 0赞

**本来这篇文章是昨晚发布的，但是昨天网上自己的网站出了一些问题。**

![这里写图片描述][SouthEast]

百度一下可能是因为配置的问题，但是自己对后端，以及命令行实在不懂。好吧那就把它先放着。等我学了php以及linux在回来解决吧。

**今天写一个类似微博发布框，或者留言框的东西。**  
**类似下边这样，在文本域里边输入文字，然后发布下边会显示。点击删除会删掉文字，当然这些都没有连接数据库。只是简单的实现这个功能罢了。**  
![这里写图片描述][SouthEast 1]

**思路：**

整体的思路

*  外边一个大盒子，里边嵌套一个文本域，一个按钮。下边的文字可以用无序列表进行添加。
    
     *  **建一个demo如下：**  
        ![这里写图片描述][SouthEast 2]
     *  **附上css:**  
        ![这里写图片描述][SouthEast 3]
 *  **重点是怎么用js实现这样点击发布以及删除的功能？**  
    ![这里写图片描述][SouthEast 4]  
    ![这里写图片描述][SouthEast 5]
 *  思路：  
    **将按钮与文本域输入的内容产生联系。给按钮加上点击事件，在点击之前，先在下边产生一个ul。点击之后先进行一个判断，如果用户未输入，则报错。程序不执行下边的。用户输入了后，创建Li。并且将文本域的内容给li(并且在li后边加上一个a，里边放删除)。难点是每一个产生的li会放在ul的最后边，也就是新发布的在下边，后边发布的在上边。接下来就需要将后边发布的放在最上边。怎么做呢？可以进行一个判断，如果这个ul的长度是 ==0 那么就给它添加li。当它有li时，使用插入方法给ul ul.insertBefore(newli,lis\[0\]) 获得第一个li 然后将新的li插在第一个li的上边.接下来便用a实现删除功能。先获得所有的a，然后给a加上点击事件，当点击a的时候，删除a的父亲。也就是包含它的那个li.最终达到我们所需要的效果。**

[SouthEast]: /images/20220713/684ff6780be64dd1a4deae1b92bb11e7.png
[SouthEast 1]: /images/20220713/3a405f9f1ab94e858dd113257fd4c8b1.png
[SouthEast 2]: /images/20220713/0f574776526647d5a40d393f5c9a2514.png
[SouthEast 3]: /images/20220713/b541e619afbf460b802aaedfb83fa78f.png
[SouthEast 4]: /images/20220713/00680b0221964141ac8b894a4a4baf79.png
[SouthEast 5]: /images/20220713/b9baefefcac0427ea22b8c06266e9aab.png

用原生js写一个微博发布框，留言框。

发表评论取消回复

还没有评论，来说两句吧...

相关阅读