今天我们来实现一个QQ空间的说说发表功能

编程学习、资料分享、知识交流！见下方评论

各位小伙伴

前端三剑客

咱们已经简单的介绍了

HTML 和 css

那么从今天开始我们就来一起认识

JavaScript

别看 JavaScript 的名字和 Java 很像，但是 JavaScript 和 Java 并没有什么关系哦~小伙伴们要记住了。

我们在开发 Javaweb 项目的之后会使用一个叫的 ajax 的技术，这个技术就需要我们的 JavaScript，所以小伙伴们 JavaScript 也要学好哦~那么开始我们今天的分享~

仿QQ空间说说功能

还记得 QQ 刚出来的时候，娜娜经常和小伙伴一起发说说，互踩空间什么的。现在大家都更喜欢用微信了~QQ的话也用的很少了，你们那更喜欢用什么？

这是娜娜截取的一个空间的截图~新鲜的呦~，那么今天我们就来仿制这个QQ空间的说说发表功能。

我们先来一个页面的布局。

这些代码难度不是很大，要是有看不懂的地方 欢迎留言和我讨论哈~，现在来一起看一下我们仿制的效果~

“这是什么鬼哦？”

“说好的仿QQ空间呢？”

“跟说好的完全不一样呀~”

...

相信看到这里

小伙伴们心中

一万头草泥马神兽奔腾而过~

对此我只能说

封面仅供参考

请以实物为准

咱们继续哈~，现在只有个页面，功能什么的还没有实现呢~，我们继续实现功能哈~

第一个功能

点击头像实现头像的切换功能

这段代码的意思是：声明一个 oImg1 对象，获取 id=img1 的图片给 oImg1，然后给 oImg1 添加一个点击事件，点击图片 oImg1 时，把 oImg1 的 class 属性清空 ，oImg2 的 class 属性变为 on . oImg2 同理。

效果：

看到了吗？这两个头像在切换哦~

第二个功能

现在完善发表的功能

这个功能就有点复杂了，首先获取文本框中输入的留言、获取头像的src、获取按钮、获取liuy 区域。

我们要实现，点击发表按钮后，清空文本框中的内容，并且把文本框中的内容输出到页面上，同时点击头像，会更换头像。功能代码：

效果：

这个仿 qq 空间的说说发表功能

就完成了

封面仅供参考

请以实物为准

小伙伴们再见了

编程学习、资料分享、知识交流！见下方评论