search

Home >Web Front-end >JS Tutorial >Native JavaScript to create Weibo publishing panel effects_javascript skills

Native JavaScript to create Weibo publishing panel effects_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:11:081283browse

JavaScript implements the effect of Weibo publishing panel. The js knowledge used is:

  1. Regular expressions distinguish Chinese and English bytes, random number generation and other functions
  2. Fade in and out, buffer motion. Flashing and other animation functions
  3. onfocus, onblur, oninput, onpropertychange and other events
  4. Dynamicly add elements and get and set dynamic attributes

Basic idea:

When the content is empty, the publish button is gray. When clicked, the text box will flash. When entering text, it will prompt how much more text can be entered. If it exceeds the limit, it will prompt and cannot be published. It should be noted that the content of the text box is judged. The length cannot be determined directly, because English occupies one byte and Chinese occupies two. It needs to be processed with regular expressions!

After obtaining the src of all the avatars, store them in a variable. When the avatar is clicked, the src of the avatar is assigned to the img of the added element, and the date object, mobile phone model, and name are dynamically created and stored in an array, and random numbers are generated. When the text box has content and the avatar is selected, it can be published successfully. When publishing, the effect fades out and a li is created. When adding li, appendChild cannot be used directly. This time, it is directly added to the back of the existing element, while the micro The Bo effect is to insert to the front. This needs to be judged. When there is an element, the insertBefore method is used, and when there is no element, the appendChild method is used.

The html code was not made on the same day and was added later, so the readability of the js code is not very good, please understand. But try to make the comments as clear as possible. If you have any questions, please leave a message!

The source code download address is attached below! 

<!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&#63;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>

Source code download: Weibo publishing panel

I hope this article will be helpful to everyone in learning javascript programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：node.js basic module http, web page analysis tool cherrio implement crawler_node.jsNext article：node.js basic module http, web page analysis tool cherrio implement crawler_node.js

Related articles

See more