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


Posted in Javascript onMarch 11, 2016

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="'+selectIcon+'" alt=""></div><h2>'+userName[randomNum]+'</h2><p class="text">'+text.value+'</p><div class="li-footer"><span>'+str2+'</span><span> '+str+' </span>来自 <span>'+userPhone[randomNum2]+'</span></div>';
      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<140){
     mark.innerHTML = 140-num;
     mark.style.color = 'green';
    }else {
     p.innerHTML = '已超出<em style="color:red">'+(num-140)+'</em> 个字';
    }

    if(text.value == ''||num>140){
     btn.className = 'con-go';
    }else {
     btn.className = 'con-go active';
    }
   }
   for(var i=0; i<iconLi.length; i++){
    iconLi[i].index = i;
    iconLi[i].onclick = function(){
     for(var i=0; i<iconLi.length; i++){
      iconLi[i].style.borderRadius = 0;
     }
     this.style.borderRadius = '140px';
     selectIcon = imgs[this.index].getAttribute('src');     
    }
   }
   nextBtn.onclick = iconPlay;
   prevBtn.onclick = function(){
    if(btnNow > 0){
     btnNow--;
     startMove(iconUl,-iconLi[0].offsetWidth*btnNow);     
    }   
   }
   function iconPlay(){
    if(btnNow < iconLi.length-6){
     btnNow++;
     startMove(iconUl,-iconLi[0].offsetWidth*btnNow);     
    }
    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<10){
    return '0'+n;
   }else {
    return ''+n;
   }
  }
 </script>
</head>
<body style="overflow: scroll;">
 <div id="container">
  <div id="header">
   <h1>有什么新鲜事想告诉大家?</h1>
   <p>把你交给我牵手秀恩爱!你要来虐狗还是进来被虐?(图) 热门微博</p>
  </div>
  <textarea placeholder="说点儿什么吧"></textarea>
  <div>
   <i>小提示:请先选择头像 再进行发布</i>
   <span class="con-go">发布</span>
  </div>
 </div>
 <div id="icon">
  <span id="prev" class="icon-btn"><</span>
  <div class="wrap-ul">
   <ul>
    <li><img src="img/3.jpg" alt=""></li>
    <li><img src="img/2.jpg" alt=""></li>
    <li><img src="img/10.jpg" alt=""></li>
    <li><img src="img/4.jpg" alt=""></li>
    <li><img src="img/5.jpg" alt=""></li>
    <li><img src="img/6.jpg" alt=""></li>
    <li><img src="img/7.jpg" alt=""></li>
    <li><img src="img/8.jpg" alt=""></li>
    <li><img src="img/9.jpg" alt=""></li>
    <li><img src="img/1.jpg" alt=""></li>
    <li><img src="img/12.jpg" alt=""></li>
    <li><img src="img/13.jpg" alt=""></li>
    <li><img src="img/14.jpg" alt=""></li>
   </ul>   
  </div>

  <span id="next" class="icon-btn">></span>
 </div>
 <div id="content">
  <ul id="con-ul">
   <li>
    <div class="icon">
     <img src="img/12.jpg" alt="">
    </div>
    <h2>白超华</h2>
    <p class="text">今天又过去了,今天过得怎么样?梦想是不是越远了?</p>
    <div class="li-footer">
     <span>03-10</span><span> 20:30 </span>来自 <span>Xperia Z6</span> 
    </div>
    
   </li>
   <li>
    <div class="icon">
     <img src="img/6.jpg" alt="">
    </div>
    <h2>金庸</h2>
    <p class="text">飞雪连天射白鹿,笑书神侠倚碧鸳。金庸小说中涌现出无数金句,九阳真经写到:他强由他强,清风拂山岗;他横由他横,明月照大江。他自狠来他自恶,我自一口真气足。当你想到金庸时,你会想到哪句话呢?转发,祝金老福如东海,寿比南山!</p>
    <div class="li-footer">
     <span>03-10</span><span> 20:24 </span>来自 <span>iPhone 6s plus</span> 
    </div>    
   </li>
   <li>
    <div class="icon">
     <img src="img/8.jpg" alt="">
    </div>
    <h2>财经网</h2>
    <p class="text">【李克强来到新疆团:我要和每位代表握握手】10日上午,李克强参加十二届全国人大四次会议新疆维吾尔自治区代表团审议。?</p>
    <div class="li-footer">
     <span>03-10</span><span> 20:10 </span>来自 <span>8848 钛金手机</span> 
    </div>    
   </li>
  </ul>
 </div>
</body>
</html>

源码下载:微博发布面板

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
关于递归运算的顺序测试代码
Nov 30 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
DWR中各种java方法的调用
May 04 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
Javascript原型链及instanceof原理详解
May 25 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 #Javascript
详解Angularjs中的依赖注入
Mar 11 #Javascript
详解AngularJS过滤器的使用
Mar 11 #Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 #Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 #Javascript
基于jQuery日历插件制作日历
Mar 11 #Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 #Javascript
You might like
PHP个人网站架设连环讲(三)
2006/10/09 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
JS基于面向对象实现的拖拽功能示例
2016/12/20 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
python3获取当前目录的实现方法
2019/07/29 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
python对XML文件的操作实现代码
2020/03/27 Python
Python实现石头剪刀布游戏
2021/01/20 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
工作保证书怎么写
2015/02/28 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
开学典礼校长致辞
2015/07/29 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python