javaScript实现微博发布面板效果.---转载白超华
采用的js知识有:
基本思路:
当内容为空时,发布按钮为灰色,点击时候文本框会闪动,输入文字会提示还可以输入多少文字,超出会提示,且不能发布,要注意的是,判断文本框内容的长度,不能直接来,因为英文属于一个字节,中文占两个,要用正则处理一下!
获取到所有头像的src之后,存入到一个变量中,当点击头像时候,将头像的src赋予添加元素的img,动态创建日期对象,手机型号,姓名存到数 组,采用生成随机数的方式获取,当文本框有了内容并且选取头像后,可以发布成功,发布时候淡出效果,创建一个li,添加li的时候 不能直接采用 appendChild,这回直接添加到已有元素的后边,而微博效果是插入到前头,这是需要判断一下,当有元素时候采用 insertBefore方法,当没有元素时候采取appendChild。
html代码,因为不是同一天做的,后续的后头添加的,所以js代码的可读性不是很好,请谅解。不过尽量注释的很明白了,如有疑问请留言!
下面附源码下载地址!
微博发布 window.onload = function(){ ]; ]; ]; ); ); ); ]; ); ); ); ); ; ; ; Date(); ]; ]; iconUl.style.width ; timer2 text.onfocus = function(){ p.innerHTML ; p.className ; change(); text.oninput change; } text.onblur = function(){ ){ p.innerHTML ; p.className = ''; } } (){ userName.length); userPhone.length); ){ clearInterval(timer1); timer1 (){ ){ clearInterval(timer1); iNow=0; }else { iNow++; } ){ text.style.background ; }else{ text.style.background = ''; } },100); }else { ){ alert(); }else { ); newLi.innerHTML ; if(aLi.length){ conUl.insertBefore(newLi,aLi[0]); }else { conUl.appendChild(newLi); } newLi.style.opacity = 0; fadeOut(newLi,100); } change(); } text.value = ''; } change(){ ]; text.value; num ){ mark.innerHTML num; mark.style.color ; }else { p.innerHTML ; } ){ btn.className ; }else { btn.className ; } } ){ iconLi[i].index = i; iconLi[i].onclick = function(){ ){ iconLi[i].style.borderRadius = 0; } ; selectIcon ); } } nextBtn.onclick = iconPlay; prevBtn.onclick = function(){ ){ btnNow--; startMove(iconUl,btnNow); } } function iconPlay(){ ){ btnNow++; startMove(iconUl,btnNow); } ){ btnNow = 0; startMove(iconUl,btnNow); } } iconUl.onmouseover = function(){ clearInterval(timer2); } iconUl.onmouseout = function(){ timer2 ); } } getLength(str){ ).length; } startMove(obj,tarrget){ clearInterval(obj.timer); obj.timer (){ Math.ceil(speed):Math.floor(speed); tarrget){ clearInterval(obj.timer); }else { obj.style.left ; } },30); } fadeOut(obj,tarrget){ obj.alpha = 0; clearInterval(obj.timer); obj.timer (){ ); tarrget){ clearInterval(timer); }else { obj.alpha+=speed; obj.style.opacity } },30); } toDou(n){ ){ n; }else { n; } } 有什么新鲜事想告诉大家?把你交给我牵手秀恩爱!你要来虐狗还是进来被虐?(图) 热门微博小提示:请先选择头像 再进行发布发布>白超华今天又过去了,今天过得怎么样?梦想是不是越远了?03-1020:30来自Xperia Z6金庸飞雪连天射白鹿,笑书神侠倚碧鸳。金庸小说中涌现出无数金句,九阳真经写到:他强由他强,清风拂山岗;他横由他横,明月照大江。他自狠来他自恶,我自一口真气足。当你想到金庸时,你会想到哪句话呢?转发,祝金老福如东海,寿比南山!03-1020:24来自iPhone 6s plus财经网【李克强来到新疆团:我要和每位代表握握手】10日上午,李克强参加十二届全国人大四次会议新疆维吾尔自治区代表团审议。?03-1020:10来自8848 钛金手机