仿腾讯微博菜单项目总结

前言

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

正文

项目视图

功能

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

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

• 发布的动态可以随时删除

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[n].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的转换。

小结

以上就是我这个项目的思考和实现，也是我第一次的项目总结，以后会把其他的好的项目搬上来。
前端小白一枚，希望前辈们有好的建议能提出来，在此感谢！