仿腾讯微博菜单项目总结

前言

都说实践是检验真理的唯一标准，对于编程来说更是如此，我在了解了前端基础知识后，找了一些练手的项目，不得不说，很虐！一个效果，从看到，思考怎么实现，然后再不断的去探索的过程，可以说是相当的虐，我需要将我脑子里所知道的知识尽全力的搜寻与匹配，不断尝试不断否定，但项目完成的这一刻，感觉太美妙了！这个项目从无到有花了我几乎一整天十几个小时的时间。在此总结一下。

正文

项目视图

功能

输入用户名，选择头像，输入内容，点击广播后，实现如下效果：



发布动态时文本框的剩余字数在下方实时显示；

发布的动态可以随时删除

HTML

HTML代码比较简单，主要分为两部分，下半部分div中一个ul列表；

li列表中插入其他元素。

CSS

头像图片要与输入框垂直对齐，使用vertical：middle;

a标签absolute定位，其父标签li元素使用relative定位；

JS

真正的难点还时在js部分，接下来按照我自己的处理顺序来讲述；

1.点击头像时，改变此头像样式，并把此图片的src属性更改为相同大图的src保存。

for (var i=0;i<m_imgs.length ;i++ )
{
//头像点击事件
m_imgs[i].onclick=function(){
//先取消其他被点击过的图片样式
for(var j=0;j<m_imgs.length;j++)
{m_imgs[j].style.opacity=0.5;
m_imgs[j].style.borderColor='#000';}
//给此点击图片添加样式
this.style.opacity=1;
this.style.borderColor='red';
//将此图片的链接更改为大图的链接保存下来
var src=this.src;
imgsrc=replacepos(src,src.length-6,'');    //固定位置替换函数

}

}
//替换字符串指定位置的字符
//str:要操作的字符串
//oldindex:需要替换字符的位置；
//newchar:将要替换的字符；
function  replacepos(str,oldindex,newchar){
var newstr=str.substring(0,oldindex);
newstr+=newchar;
newstr+=str.substring(oldindex+1,str.length)
return newstr;
}

2.实时计算textarea内容字符个数，我用的方法比较初级，通过字符长度来做判断；

textarea.oninput=function(){
//变量count为显示剩余字符数的spanb标签
count.innerText=140-textarea.value.length;
}

此处一开始用的onkeyup事件，但是只有在ie中有效，于是又换为oninput,主流浏览器支持都还可以。

3.按照层级创建新的li元素，我使用的是document.createElement()方法；

function creatli(){
//获取当前时间
var date=new Date();
var time=date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日'+format(date.getHours())+'：'+format(date.getMinutes());
//获取用户名与输入的内容
var li=document.createElement('li');
var username=inputs[0].value+'：      ';
var news=textarea.value;
//判断发表的内容是否完整
if(imgsrc==undefined){
alert('请选择头像');return false;}
if(!inputs[0].value){alert('请输入用户名');return false;}

if(news.length==0){alert('请输入内容');return false;}

else
{
var img=document.createElement('img');img.src=imgsrc;
var div=document.createElement('div');  div.className='dongtai';
var p=document.createElement('p');
var span1=document.createElement('span');
var name=document.createTextNode(username);
var message=document.createTextNode(news)
var span2=document.createElement('span');
var time=document.createTextNode(time);
var a=document.createElement('a');a.href='javascript:;';a.innerHTML='删除';
//新添加的元素时删除li标签的方法
a.onclick=function(){self=this;delet()}//太他妈辛苦了！！！！
span2.appendChild(time);
span1.appendChild(name);
p.appendChild(span1);
p.appendChild(message);
div.appendChild(p);
div.appendChild(span2);
li.appendChild(img);
li.appendChild(div);
li.appendChild(a);
ul.insertBefore(li,ul.childNodes[1])
}
inputs[0].value=textarea.value='';//将输入内容清空
}
submit.onclick=function(){creatli()};

function format(a) {
return a.toString().replace(/^(\d)$/, "0$1")
}
//已存在的a元素的删除自身li标签的方法
var as=ul.getElementsByTagName('a');
for (var n=0;n<as.length ;n++ )
{
as
.onclick=function(){
self=this;
delet();
}
}

function  delet(){
var   thisNode=self.parentNode;
thisNode.parentNode.removeChild(thisNode);
}

此处有几个要点

获取具体时间时分钟数时0~59，于是使用了format()函数将其转化为两位数；

关于判断是否可以发表时的if语句，我时饶了一会才绕过来。

最重要的一点，在创建元素之后，给元素添加事件，这是给动态创建的元素添加事件的最佳时机， 我一开始一直在思考如何给新添加的a元素添加删除事件，但苦苦想不到办法，因为我一开始思考的时候总是想在按照后面对已存在的a标签的方式（即先获取元素，再添加事件），但是添加后时无法获取的，我甚至想到使用递归函数，但苦于不会用。

还是删除li节点的函数，此处的thisnode.parentNode.removeChild(thisnode),方法用于通过某标签删除自身的操作是我刚知道的。

delet函数，此处self一开始我用的this,但是发现无法获取正确的a标签，原因在于后来调用是在全局环境中，this指向了window.所以在此进行了this与self的转换。

小结

以上就是我这个项目的思考和实现，也是我第一次的项目总结，以后会把其他的好的项目搬上来。

前端小白一枚，希望前辈们有好的建议能提出来，在此感谢！