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

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

这里写图片描述

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

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

思路:

整体的思路

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

    • 建一个demo如下:
      这里写图片描述

    • 附上css:
      这里写图片描述

  • 重点是怎么用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.最终达到我们所需要的效果。

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值