原生JavaScript制作微博发布面板效果_javascript技巧

javaScript实现微博发布面板效果.采用的js知识有：

1. 正则表达式区分中英文字节、随机数生成等函数
2. 淡入淡出、缓冲运动。闪动等动画函数
3. onfocus、onblur、oninput、onpropertychange等事件
4. 动态添加元素，获取设置动态属性

基本思路：

当内容为空时，发布按钮为灰色，点击时候文本框会闪动，输入文字会提示还可以输入多少文字，超出会提示，且不能发布，要注意的是，判断文本框内容的长度，不能直接来，因为英文属于一个字节，中文占两个，要用正则处理一下！

获取到所有头像的src之后，存入到一个变量中，当点击头像时候，将头像的src赋予添加元素的img，动态创建日期对象，手机型号，姓名存到数组，采用生成随机数的方式获取，当文本框有了内容并且选取头像后，可以发布成功，发布时候淡出效果，创建一个li，添加li的时候 不能直接采用 appendChild,这回直接添加到已有元素的后边,而微博效果是插入到前头，这是需要判断一下，当有元素时候采用 insertBefore方法，当没有元素时候采取appendChild。

html代码,因为不是同一天做的，后续的后头添加的，所以js代码的可读性不是很好，请谅解。不过尽量注释的很明白了，如有疑问请留言！

下面附源码下载地址！

'+userName[randomNum]+'

'+text.value+'

'+str2+' '+str+' 来自 '+userPhone[randomNum2]+'

'; if(aLi.length){ conUl.insertBefore(newLi,aLi[0]); }else { conUl.appendChild(newLi); } newLi.style.opacity = 0; fadeOut(newLi,100); } change(); } text.value = ''; } //判断输入字符的多少 function change(){ var mark = document.getElementsByTagName('em')[0]; var tValue = text.value; num = Math.ceil(getLength(tValue)/2); if(num'+(num-140)+' 个字'; } if(text.value == ''||num>140){ btn.className = 'con-go'; }else { btn.className = 'con-go active'; } } for(var i=0; i 0){ btnNow--; startMove(iconUl,-iconLi[0].offsetWidth*btnNow); } } function iconPlay(){ if(btnNow iconLi.length-7){ btnNow = 0; startMove(iconUl,-iconLi[0].offsetWidth*btnNow); } } iconUl.onmouseover = function(){ clearInterval(timer2); } iconUl.onmouseout = function(){ timer2 = setInterval(iconPlay,3000); } } //正则：用于区分中文为两个字节 function getLength(str){ return String(str).replace(/[^\x00-\xff]/g,'aa').length; } //头像区滚动动画 function startMove(obj,tarrget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (tarrget-obj.offsetLeft)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetLeft == tarrget){ clearInterval(obj.timer); }else { obj.style.left = obj.offsetLeft+speed+'px'; } },30); } //淡入淡出 function fadeOut(obj,tarrget){ obj.alpha = 0; clearInterval(obj.timer); obj.timer = setInterval(function(){ var current = parseInt(current*100); var speed = (tarrget-obj.alpha)/30; if(obj.alpha==tarrget){ clearInterval(timer); }else { obj.alpha+=speed; obj.style.opacity=obj.alpha/100; } },30); } //补0函数 function toDou(n){ if(n

有什么新鲜事想告诉大家？

把你交给我牵手秀恩爱！你要来虐狗还是进来被虐？(图)　热门微博

小提示:请先选择头像 再进行发布 发布

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

>

• 

  白超华

  今天又过去了，今天过得怎么样？梦想是不是越远了？

  03-10 20:30 来自 Xperia Z6
• 

  金庸

  飞雪连天射白鹿，笑书神侠倚碧鸳。金庸小说中涌现出无数金句，九阳真经写到：他强由他强，清风拂山岗；他横由他横，明月照大江。他自狠来他自恶，我自一口真气足。当你想到金庸时，你会想到哪句话呢？转发，祝金老福如东海，寿比南山！

  03-10 20:24 来自 iPhone 6s plus
• 

  财经网

  【*来到*团：我要和每位代表握握手】10日上午，*参加十二届全国人大四次会议**自治区代表团审议。？

  03-10 20:10 来自 8848 钛金手机