华山资源网

原生JavaScript制作微博发布面板效果
网络编程 2024/11/15 佚名
3 1

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

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

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

基本思路：

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

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

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

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

下面附源码下载地址！

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>微博发布</title>
 <link rel="stylesheet" href="style.css">
 <script>
  window.onload = function(){
   var text = document.getElementsByTagName('textarea')[0];
   var p = document.getElementsByTagName('p')[0];
   var btn = document.getElementsByTagName('span')[0];
   var conUl = document.getElementById('con-ul');
   var aLi = conUl.getElementsByTagName('li');
   var icon = document.getElementById('icon');
   var iconUl = icon.getElementsByTagName('ul')[0];
   var iconLi = iconUl.getElementsByTagName('li');
   var prevBtn = document.getElementById('prev');
   var nextBtn = document.getElementById('next');
   var imgs = icon.getElementsByTagName('img');
   var btnNow = 0;
   var timer2 = null;   //头像区无缝滚动
   var num = 0;
   var timer1 = null;  //当输入内容为空或者输入字符超过，文本框闪动
   var iNow = 0;
   var selectIcon = '';  //用于保存所选择图片的路径
   var date = new Date();   
   var str = toDou(date.getHours())+':'+toDou(date.getMinutes()); //获取当前时间   
   var str2 = toDou(date.getMonth()+1)+'-'+date.getDate();  //获取当前日期   
   var userName = ['周杰伦','哆啦A梦','牛尔','郭德纲','孙燕姿','柴碧云','冯昆鹏','奥巴马','赵本山'];
   var userPhone = ['Xperia Z3','iPhone7s','一加one plus','小米5s','8848钛金','三星s8','锤子T3'];

   iconUl.style.width = iconLi.length*iconLi[0].offsetWidth+'px';
   timer2 = setInterval(iconPlay,3000); //头像区块无缝滚动

   text.onfocus = function(){
    p.innerHTML = '还可以输入<em>'+(num-140)+'</em> 个字';
    p.className = 'dis';
    change();
    text.oninput = text.onpropertychange = change;
   }
   text.onblur = function(){
    if(text.value == ''){
     p.innerHTML = '把你交给我牵手秀恩爱！你要来虐狗还是进来被虐？(图)　热门微博';
     p.className = '';     
    }
   }
   //点击发布按钮
   btn.onclick = function(){
    var randomNum = Math.floor(Math.random()*userName.length);
    var randomNum2 = Math.floor(Math.random()*userPhone.length);
    if(text.value==''||num>140){
     clearInterval(timer1);
     timer1 = setInterval(function(){
      if(iNow==5){
       clearInterval(timer1);
       iNow=0;
      }else {
       iNow++;
      }   
      if(iNow%2){
       text.style.background = '#ff9797';
      }else{
       text.style.background = '';
      }     
     },100);
    }else {
     //判断是否选择头像
     if(selectIcon==''){
      alert('请先选择头像');
     }else {
      //动态添加li
      var newLi = document.createElement('li');
      newLi.innerHTML += '<div class="icon"><img src="/UploadFiles/2021-04-02/'+selectIcon+'">


源码下载：微博发布面板


希望本文所述对大家学习javascript程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com