今天我们来实现一个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 空间的说说发表功能

就完成了

封面仅供参考

请以实物为准

小伙伴们再见了

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180308A0C3RA00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券