亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS 仿騰訊發(fā)表微博的效果代碼

 更新時間：2013年12月25日 17:28:31   作者：  
這篇文章主要介紹了JS 仿騰訊發(fā)表微博的效果代碼，有需要的朋友參考一下

最近2天研究了下 騰訊發(fā)表微博的效果 特此來分享下，效果如下：

 

在此分享前 來談談本人編寫代碼的習慣，很多人會問我既然用的是jquery框架 為什么寫的組件不用Jquery那種形式？我當時回答的是：每個人編寫代碼有每個人的習慣。但是我更想表達的是：這種編碼個人覺得 有一個很大的優(yōu)點，我不是非常依賴于Jquery框架，因為不同的公司有不同的框架 比如在淘寶用的kissy框架 在支付寶用的是支付寶框架 在百度用的是百度框架 在騰訊有騰訊的前端js框架 假如我的編寫代碼太依賴于jquery 那假如其他人想要用我代碼或者我自己某一天去做騰訊項目了 但是他們那邊要求我們只能用他們的JS框架 且又有這樣的功能？那如果我完全依賴jquery那種形式編碼 那現在我是不是要重新編碼呢？如果按照現在編碼方式去編碼 最多只是用了下jquery選擇器而已 那么只要改下選擇器 其他的代碼都可以直接拿來用，這樣的擴張性非常好！我個人覺得作為一個專業(yè)的前端開發(fā)，不僅僅只會一點點jquery做做東西，而更應該考慮編寫高質量的代碼，可能用jquery寫寫簡單的代碼同樣能做好某個東西，但是有沒有考慮到假如某一天需求增加了某某功能 你是不是又要改代碼？能不能在以前的基礎上重新寫新的功能？而無需改代碼！

何謂高質量的代碼？

個人覺得必須滿足以下幾點：

   1. 可擴展性。

   2. 可維護性。

   3. 可讀性,易使用性。

   4. JS性能。

 最主要滿足以上幾點。

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

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

 1.每次發(fā)表下后 大家在說列表會添加一條，目前沒有發(fā)ajax請求 后臺沒有記錄 所以刷新頁面 會清掉。

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

其實思路很簡單 看上面的效果就明白 所以思路在這邊不多說了！或者我下面會提供壓縮demo 可以自己下載下來看看效果就ok了！每次發(fā)表一次后 都提供了回調 作為擴展吧！當然鼠標移到某一項時候 會出現刪除按鈕 同時可以任意刪除某一項。直接貼代碼吧 也沒有什么好說的！

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;}

JS代碼如下：

復制代碼 代碼如下:

/**
 * 仿騰訊發(fā)表微博的效果
 * 1.目前沒有發(fā)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               // 動態(tài)廣播完后的回調函數
    };

    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;
            }
            // 本來是要發(fā)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({});
 });

源碼下載：http://xiazai.jb51.net//201312/yuanma/wb(jb51.net).rar

相關文章

  • JS 日期與時間戮相互轉化的簡單實例

    JS 日期與時間戮相互轉化的簡單實例

    下面小編就為大家?guī)硪黄狫S 日期與時間戮相互轉化的簡單實例。小編覺得挺不錯的， 現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • web性能優(yōu)化之javascript性能調優(yōu)

    web性能優(yōu)化之javascript性能調優(yōu)

    本文詳細介紹Web 開發(fā)中關于性能方面需要注意的一些小細節(jié)，從 JavaScript 本身著手，介紹了 JavaScript 中需要避免的一些函數的使用和編程規(guī)則，比如 eval 的弊端，function scope chain 以及 String 的用法等等
    2012-12-12
  • 微信小程序實現基于三元運算驗證手機號/姓名功能示例

    微信小程序實現基于三元運算驗證手機號/姓名功能示例

    這篇文章主要介紹了微信小程序實現基于三元運算驗證手機號/姓名功能,涉及三元運算符的判定及字符串正則驗證相關操作技巧,需要的朋友可以參考下
    2019-01-01
  • 原生js實現仿window10系統(tǒng)日歷效果的實例

    原生js實現仿window10系統(tǒng)日歷效果的實例

    下面小編就為大家?guī)硪黄鷍s實現仿window10系統(tǒng)日歷效果的實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • JavaScript的設計模式經典之代理模式

    JavaScript的設計模式經典之代理模式

    代理模式的定義是把對一個對象的訪問, 交給另一個代理對象來操作。接下來通過本文給大家介紹JavaScript的設計模式之代理模式，感興趣的朋友一起學習吧
    2016-02-02
  • 使用 Node.js 做 Function Test實現方法

    使用 Node.js 做 Function Test實現方法

    這篇文章介紹了Node.js 做 Function Test實現方法，有需要的朋友可以參考一下
    2013-10-10
  • JavaScript獲取當前運行腳本文件所在目錄的方法

    JavaScript獲取當前運行腳本文件所在目錄的方法

    這篇文章主要介紹了JavaScript獲取當前運行腳本文件所在目錄的方法,涉及JavaScript文件目錄操作的相關技巧,需要的朋友可以參考下
    2016-02-02
  • JavaScript中this函數使用實例解析

    JavaScript中this函數使用實例解析

    這篇文章主要介紹了JavaScript中this函數使用實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-02-02
  • javascript版2048小游戲

    javascript版2048小游戲

    本文給大家分享的是使用javascript制作的2048小游戲的代碼，僅僅是想鍛煉下自己的編程代碼風格，盡量做的規(guī)范些，小伙伴們多多給些建議。
    2015-03-03
  • 開發(fā)用到的js封裝方法（20種）

    開發(fā)用到的js封裝方法（20種）

    在本問中我們給大家總結了20種開發(fā)中常用到的JS封裝方法，有需要的讀者們可以學習下。
    2018-10-10

最新評論