JS 仿騰訊發表微博的效果

時間 2019-11-19

原文原文鏈接

JS 仿騰訊發表微博的效果javascript

最近2天研究了下騰訊發表微博的效果特此來分享下，效果以下：css

在此分享前來談談本人編寫代碼的習慣，不少人會問我既然用的是jquery框架爲何寫的組件不用Jquery那種形式？我當時回答的是：每一個人編寫代碼有每一個人的習慣。可是我更想表達的是：這種編碼我的以爲有一個很大的優勢，我不是很是依賴於Jquery框架，由於不一樣的公司有不一樣的框架好比在淘寶用的kissy框架在支付寶用的是支付寶框架在百度用的是百度框架在騰訊有騰訊的前端js框架假如個人編寫代碼太依賴於jquery 那假如其餘人想要用我代碼或者我本身某一天去作騰訊項目了可是他們那邊要求咱們只能用他們的JS框架且又有這樣的功能？那若是我徹底依賴jquery那種形式編碼那如今我是否是要從新編碼呢？若是按照如今編碼方式去編碼最多隻是用了下jquery選擇器而已那麼只要改下選擇器其餘的代碼均可以直接拿來用，這樣的擴張性很是好！我我的以爲做爲一個專業的前端開發，不只僅只會一點點jquery作作東西，而更應該考慮編寫高質量的代碼，可能用jquery寫寫簡單的代碼一樣能作好某個東西，可是有沒有考慮到假如某一天需求增長了某某功能你是否是又要改代碼？能不能在之前的基礎上從新寫新的功能？而無需改代碼！html

何謂高質量的代碼？前端

我的以爲必須知足如下幾點：java

1. 可擴展性。jquery

2. 可維護性。ajax

3. 可讀性,易使用性。app

4. JS性能。框架

最主要知足以上幾點。ide

好了廢話很少說了！轉主題，目前我作的這個發表微博效果只是簡單的固然騰訊發表微博有一些複雜的功能好比說下面有添加表情等等功能，目前沒有作成那樣的(工做量比較大)。

下面我寫的這個JS代碼須要注意2點：

1.每次發表下後你們在說列表會添加一條，目前沒有發ajax請求後臺沒有記錄因此刷新頁面會清掉。

2. 時間是用的是客戶端時間假如客戶端時間錯誤的話那麼時間也會受影響。

其實思路很簡單看上面的效果就明白因此思路在這邊很少說了！或者我下面會提供壓縮demo 能夠本身下載下來看看效果就ok了！每次發表一次後都提供了回調做爲擴展吧！固然鼠標移到某一項時候會出現刪除按鈕同時能夠任意刪除某一項。直接貼代碼吧也沒有什麼好說的！

HTML代碼以下：

<div id="msgBox">
        <form>
            <h2>來 , 說說你在作什麼 , 想什麼</h2>
            <div>
                <input id="userName" class="f-text" value="" />
                <p id="face">
                    <img src="img/face1.gif" class="current" />
                    <img src="img/face2.gif" />
                    <img src="img/face3.gif" />
                    <img src="img/face4.gif" />
                    <img src="img/face5.gif" />
                    <img src="img/face6.gif" />
                    <img src="img/face7.gif" />
                    <img src="img/face8.gif" />
                </p>
            </div>
            <div>
                <textarea id="conBox" class="f-text"></textarea>
            </div>
            <div class="tr">
                <p>
                    <span class="countTxt">還能輸入</span><strong class="maxNum">140</strong><span>個字</span>
                    <input id="sendBtn" type="button" value="" title="快捷鍵 Ctrl+Enter" />
                </p>
            </div>
        </form>
        <div class="list">
            <h3><span>你們在說</span></h3>
            <ul id="list-msg"></ul>
        </div>    
    </div>

CSS代碼以下：

body,div,h2,h3,ul,li,p{margin:0;padding:0;}
    a{text-decoration:none;}
    a:hover{text-decoration:underline;}
    ul{list-style-type:none;}
    body{color:#333;background:#3c3a3b;font:12px/1.5 \5b8b\4f53;}
    #msgBox{width:500px;background:#fff;border-radius:5px;margin:10px auto;padding-top:10px;}
    #msgBox form h2{font-weight:400;font:400 18px/1.5 \5fae\8f6f\96c5\9ed1;}
    #msgBox form{background:url(img/boxBG.jpg) repeat-x 0 bottom;padding:0 20px 15px;}
    #userName,#conBox{color:#777;border:1px solid #d0d0d0;border-radius:6px;background:#fff url(img/inputBG.png) repeat-x;padding:3px 5px;font:14px/1.5 arial;}
    #userName.active,#conBox.active{border:1px solid #7abb2c;}
    #userName{height:20px;}
    #conBox{width:448px;resize:none;height:65px;overflow:auto;}
    #msgBox form div{position:relative;color:#999;margin-top:10px;}
    #msgBox img{border-radius:3px;}
    #face{position:absolute;top:0;left:172px;}
    #face img{float:left;display:inline;width:30px;height:30px;cursor:pointer;margin-right:6px;opacity:0.5;filter:alpha(opacity=50);}
    #face img.hover,#face img.current{width:28px;height:28px;border:1px solid #f60;opacity:1;filter:alpha(opacity=100);}
    #sendBtn{border:0;width:112px;height:30px;cursor:pointer;margin-left:10px;background:url(img/btn.png) no-repeat;}
    #sendBtn.hover{background-position:0 -30px;}
    #msgBox form .maxNum{font:26px/30px Georgia, Tahoma, Arial;padding:0 5px;}
    #msgBox .list{padding:10px;}
    #msgBox .list h3{position:relative;height:33px;font-size:14px;font-weight:400;background:#e3eaec;border:1px solid #dee4e7;}
    #msgBox .list h3 span{position:absolute;left:6px;top:6px;background:#fff;line-height:28px;display:inline-block;padding:0 15px;}
    #msgBox .list ul{overflow:hidden;zoom:1;}
    #msgBox .list ul li{float:left;clear:both;width:100%;border-bottom:1px dashed #d8d8d8;padding:10px 0;background:#fff;overflow:hidden;}
    #msgBox .list ul li.hover{background:#f5f5f5;}
    #msgBox .list .userPic{float:left;width:50px;height:50px;display:inline;margin-left:10px;border:1px solid #ccc;border-radius:3px;}
    #msgBox .list .content{float:left;width:400px;font-size:14px;margin-left:10px;font-family:arial;word-wrap:break-word;}
    #msgBox .list .userName{display:inline;padding-right:5px;}
    #msgBox .list .userName a{color:#2b4a78;}
    #msgBox .list .msgInfo{display:inline;word-wrap:break-word;}
    #msgBox .list .times{color:#889db6;font:12px/18px arial;margin-top:5px;overflow:hidden;zoom:1;}
    #msgBox .list .times span{float:left;}
    #msgBox .list .times a{float:right;color:#889db6;}
    .tr{overflow:hidden;zoom:1;}
    .tr p{float:right;line-height:30px;}
    .tr *{float:left;}
    .hidden {display:none;}

View Code

JS代碼以下：

/**
 * 仿騰訊發表微博的效果
 * 1.目前沒有發ajax請求 後臺沒有記錄 因此刷新頁面 會清掉
 * 2. 時間是用的是客戶端時間 假如客戶端時間錯誤的話 那麼時間也會受影響。
 * 目前就這樣交互 具體的思路不太複雜 若是項目中用到這樣的 能夠根據具體的需求更改
 * @constructor Microblog
 * @date 2013-12-23 
 * @author tugenhua
 * @email 879083421@qq.com
 */
 
 function Microblog(options) {
 
    this.config = {
        maxNum                        :   140,               // 最大的字符數
        targetElem                    :   '.f-text',         // 輸入框 或者文本域的class名
        maxNumElem                    :   '.maxNum',         // 還能輸入多少字容器
        sendBtn                       :   '#sendBtn',        // 廣播按鈕
        face                          :   '#face',           // 表情容器
        activeCls                     :   'active',          // 鼠標點擊輸入框add類
        currentCls                    :   'current',         // 鼠標點擊face頭像時 增長的類名
        inputID                       :   '#userName',       // 輸入框ID
        textareaId                    :   '#conBox',         // 文本域ID
        list                          :   '#list-msg',       // 你們在說的容器
        callback                      :   null               // 動態廣播完後的回調函數
    };

    this.cache = {};
    this.init(options);
 }

 Microblog.prototype = {
    
    constructor: Microblog,
    
    init: function(options) {
        this.config = $.extend(this.config,options || {});
        var self = this,
            _config = self.config,
            _cache = self.cache;
        
        // 點擊輸入框input 文本域 textarea 邊框的變化
        $(_config.targetElem).each(function(index,item){

            $(item).unbind('focus');
            $(item).bind('focus',function(e){
                !$(this).hasClass(_config.activeCls) && $(this).addClass(_config.activeCls);
            });
            $(item).unbind('blur');
            $(item).bind('blur',function(e){
                $(this).hasClass(_config.activeCls) && $(this).removeClass(_config.activeCls);
            });
        });

        // 點擊face頭像 add(增長)類名
        var faceImg = $('img',$(_config.face));
        $(faceImg).each(function(index,item){
            $(item).unbind('click');
            $(item).bind('click',function(e){
                $(this).addClass(_config.currentCls).siblings().removeClass(_config.currentCls);
            });
        });

        // 廣播按鈕hover事件
        $(_config.sendBtn).hover(function(){
            !$(this).hasClass('hover') && $(this).addClass('hover');
        },function(){
            $(this).hasClass('hover') && $(this).removeClass('hover');
        })
        
        // 綁定事件
        self._bindEnv();
    },
    /*
     * 計算字符的長度 包括中文 數字 英文等等
     * @param str
     * @return 字符串的長度
     */
     _countCharacters: function(str) {
         var totalCount = 0;
          for (var i=0; i<str.length; i++) {
             var c = str.charCodeAt(i);
             if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
                totalCount++;
             }else {   
                totalCount+=2;
             }
         }
         return totalCount;
     },
     /*
      * 全部的綁定事件
      */
     _bindEnv: function() {
        var self = this,
            _config = self.config,
            _cache = self.cache;
        
        // 文本域keyup事件
        self._keyUp();
        
        // 點擊廣播按鈕事件
        self._clickBtn();
     },
     /*
      * 文本域keyup事件
      */
     _keyUp: function() {
         var self = this,
             _config = self.config,
             _cache = self.cache;
         $(_config.textareaId).unbind('keyup');
         $(_config.textareaId).bind('keyup',function(){
             var len = self._countCharacters($(this).val()),
                 html;
             if(_config.maxNum * 1 >= len * 1) {
                html = _config.maxNum * 1 - len * 1;
             }else {
                html = _config.maxNum * 1 - len * 1;
             }
             $(_config.maxNumElem).html(html);
             $(_config.maxNumElem).attr('data-html',html);
         });
     },
     /*
      * 點擊廣播按鈕事件
      */
     _clickBtn: function() {
        
        var self = this,
            _config = self.config,
            _cache = self.cache;
        var reg = /^\s*$/g;
        $(_config.sendBtn).unbind('click');
        $(_config.sendBtn).bind('click',function(){
            
            var inputVal = $(_config.inputID).val(),
                textVal = $(_config.textareaId).val(),
                maxNum = $(_config.maxNumElem).attr('data-html');
            if(reg.test(inputVal)) {
                alert('請輸入你的姓名');
                return;
            }else if(reg.test(textVal)) {
                alert("隨便說點什麼吧!");
                return;
            }
            if(maxNum * 1 < 0) {
                alert('字符超過限制 請縮減字');
                return;
            }
            // 原本是要發ajax請求的 可是這邊沒有後臺處理 因此目前只是客戶端渲染頁面
            self._renderHTML(inputVal,textVal);
        });
     },
     /*
      * 把html結構渲染出來
      */
     _renderHTML: function(inputVal,textVal) {
         var self = this,
             _config = self.config,
             _cache = self.cache;
        var oLi = document.createElement("li"),
            oDate = new Date();
        oLi.innerHTML = '<div class="userPic">' + 
                           '<img src="'+self._getSrc()+'" />'+
                        '</div>' + 
                        '<div class="content">' + 
                            '<div class="userName"><a href="javascript:;">'+inputVal+'</a>:</div>' + 
                            '<div class="msgInfo">'+textVal+'</div>' + 
                            '<div class="times">'+
                                '<span>'+self._format(oDate.getMonth() + 1) + "\u6708" + self._format(oDate.getDate()) + "\u65e5 " + self._format(oDate.getHours()) + ":" + self._format(oDate.getMinutes())+'</span>'+ 
                                '<a class="del hidden" href="javascript:;">刪除</a>'+
                            '</div>' + 
                        '</div>';
        // 插入元素
        if($(_config.list + " li").length > 0) {
            
            $(oLi).insertBefore($(_config.list + " li")[0]);
            self._animate(oLi);
        }else {

            $(_config.list).append(oLi);
            self._animate(oLi);
            
        }
        _config.callback && $.isFunction(_config.callback) && _config.callback();

        // 清空輸入框 文本域的值
        self._clearVal();

        // hover事件
        self._hover();
     },
     /*
      * 格式化時間, 若是爲一位數時補0
      */
    _format: function(str){
        return str.toString().replace(/^(\d)$/,"0$1");
    },
    /*
     * 獲取ing src
     * @return src
     */
    _getSrc: function() {
        var self = this,
            _config = self.config,
            _cache = self.cache;
        var faceImg = $('img',$(_config.face));
        
        for(var i = 0; i < faceImg.length; i++) {
            if($(faceImg[i]).hasClass(_config.currentCls)) {
                return $(faceImg[i]).attr('src');
                break;
            }
        }
    },
    /*
     * 清空值
     */
    _clearVal: function() {
        var self = this,
            _config = self.config,
            _cache = self.cache;

        $(_config.inputID) && $(_config.inputID).val('');
        $(_config.textareaId) && $(_config.textareaId).val('');

    },
    /*
     * hover事件
     */
    _hover: function() {
        var self = this,
            _config = self.config,
            _cache = self.cache;
        $(_config.list + ' li').hover(function(){
            !$(this).hasClass('hover') && $(this).addClass('hover').siblings().removeClass('hover');
            $('.del',$(this)).hasClass('hidden') && $('.del',$(this)).removeClass('hidden');
            var $that = $(this);

            // 刪除事件
            $('.del',$that).unbind('click');
            $('.del',$that).bind('click',function(){
                
                $($that).animate({
                    'opacity' : 0
                },500,function(){
                    $that.remove();    
                });
            });
        },function(){
            $(this).hasClass('hover') && $(this).removeClass('hover');
            !$('.del',$(this)).hasClass('hidden') && $('.del',$(this)).addClass('hidden');
        });
        
    },
    /*
     * height
     */
     _animate: function(oLi) {
        var self = this;
        var iHeight = $(oLi).height(),
            alpah = 0,
            timer,
            count = 0;
        $(oLi).css({"opacity" : "0", "height" : "0"});

        timer && clearInterval(timer);
        timer = setInterval(function (){
            $(oLi).css({"display" : "block", "opacity" : "0", "height" : (count += 8) + "px"});
            if (count > iHeight){
                    clearInterval(timer);
                    $(oLi).css({ "height" : iHeight + "px"});
                    timer = setInterval(function (){
                        $(oLi).css({"opacity" : alpah += 10});

                        alpah > 100 && (clearInterval(timer), $(oLi).css({"opacity":100}));

                    },30);
                }
            },30);
     }
 };

 // 初始化代碼
 $(function(){
    new Microblog({});
 });