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

原创: 2016-05-16 15:11:08814浏览

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

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

基本思路：

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

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

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

下面附源码下载地址！




 
 微博发布
 
 

  

 
  
   有什么新鲜事想告诉大家？
   把你交给我牵手秀恩爱！你要来虐狗还是进来被虐？(图)　热门微博
  
  
  
   小提示:请先选择头像 再进行发布
   发布
  
 
 
  <
  
   
    
    
    
    
    
    
    
    
    
    
    
    
    
      
  

  >
 
 
  
   
    
     
    
    白超华
    今天又过去了，今天过得怎么样？梦想是不是越远了？
    
     03-10 20:30 来自 Xperia Z6 
    
    
   
   
    
     
    
    金庸
    飞雪连天射白鹿，笑书神侠倚碧鸳。金庸小说中涌现出无数金句，九阳真经写到：他强由他强，清风拂山岗；他横由他横，明月照大江。他自狠来他自恶，我自一口真气足。当你想到金庸时，你会想到哪句话呢？转发，祝金老福如东海，寿比南山！
    
     03-10 20:24 来自 iPhone 6s plus 
        
   
   
    
     
    
    财经网
    【李克强来到新疆团：我要和每位代表握握手】10日上午，李克强参加十二届全国人大四次会议新疆维吾尔自治区代表团审议。？
    
     03-10 20:10 来自 8848 钛金手机