各位小伙伴
前端三剑客
咱们已经简单的介绍了
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 空间的说说发表功能
就完成了
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> <meta name="Keywords" content="关键字,关键词"> <meta name="Description" content="描述和简介"> <title>Title</title> <style type="text/css"> *{margin:0;padding:0;} body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;} a{text-decoration:none;color: inherit;} img{display: block;border:none;} ol,ul{list-style:none;} .clearfix:after {content: "";display: block;clear: both;} .fl{ float: left;} .fr{ float: right;} .main{ width: 500px; margin: 100px auto; } .main .box{ width: 500px; height: 150px; background: #ccc; border-radius: 10px; box-shadow: 0 0 10px 0 #000; padding: 10px;} .box .top textarea{ width: 100%; height: 80px; resize: none; outline: none;} .box .bottom .toux{ position: relative; width: 40px; height: 40px; padding: 2px; background: #fff; margin-top: 10px; border: 2px solid #999;} .box .bottom .toux img{ position: absolute; left: 2px; top: 2px; display: none; width: 40px; height: 40px; cursor: pointer; } .box .bottom .toux img.on{ display: block;} .box .bottom .btn{ width: 100px; height: 40px; background: orangered; margin-top: 10px; font: 20px/40px ""; color: #fff; text-align: center; border-radius: 5px; cursor: pointer; } .main ul{ margin-top: 10px; } .main .liuy li{ width: 500px; border-bottom: 2px solid #999; padding: 10px; } .main .liuy li img{ width: 40px; height: 40px; padding: 2px; border: 2px solid #999; cursor: pointer; } </style></head><body> <div class="main"> <div class="box"> <div class="top"><form action=""> <textarea name="" id="oarea" cols="30" rows="10"></textarea></form> </div> <div class="bottom"><div class="toux fl"> <img src="img/1.jpg" alt="" id="img1" class="on"> <img src="img/2.jpg" alt="" id="img2"></div><div class="btn fr" id="btn">发表</div> </div> </div> <ul class="liuy" id="liuy"> </ul> </div> <script> var oImg1 = document.getElementById("img1"); //获取头像的第一张图片 var oImg2 = document.getElementById("img2");//获取头像的第二张图片 var oArea = document.getElementById("oarea"); //获取文本域 var oImg = oImg1.src;//获取图片的src var oBtn = document.getElementById("btn");//获取发表按钮 var oLiuy = document.getElementById("liuy");//获取ul //点击第一个头像 oImg1.onclick = function () { this.className = ""; oImg2.className = "on"; oImg = oImg2.src; }; //点击第二个头像 oImg2.onclick = function () { this.className = ""; oImg1.className = "on"; oImg = oImg1.src; }; //点击发表的时候 oBtn.onclick = function () { var value = oArea.value; //获取文本域里面输入的内容 if(value){oLiuy.innerHTML += "<li class=\"clearfix\"><img src=\""+oImg+"\"" + "class=\"fl-l\"><p class=\"fl-l\">"+value+"</p></li>";oArea.value = ""; }else{alert("不允许发表空的留言"); } } </script></body></html>
封面仅供参考
请以实物为准
小伙伴们再见了
如果觉得《今天我们来实现一个QQ空间的说说发表功能》对你有帮助，请点赞、收藏，并留下你的观点哦！
