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

时间:2021-07-31 09:25:25

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

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

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

今天写一个类似微博发布框,或者留言框的东西。
类似下边这样,在文本域里边输入文字,然后发布下边会显示。点击删除会删掉文字,当然这些都没有连接数据库。只是简单的实现这个功能罢了。
用原生js写一个微博发布框,留言框。

思路:

整体的思路

  • 外边一个大盒子,里边嵌套一个文本域,一个按钮。下边的文字可以用无序列表进行添加。

    • 建一个demo如下:
      用原生js写一个微博发布框,留言框。

    • 附上css:
      用原生js写一个微博发布框,留言框。

  • 重点是怎么用js实现这样点击发布以及删除的功能?
    用原生js写一个微博发布框,留言框。
    用原生js写一个微博发布框,留言框。

  • 思路:
    将按钮与文本域输入的内容产生联系。给按钮加上点击事件,在点击之前,先在下边产生一个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.最终达到我们所需要的效果。