JS 仿騰訊發(fā)表微博的效果代碼
最近2天研究了下 騰訊發(fā)表微博的效果 特此來(lái)分享下，效果如下：
在此分享前 來(lái)談?wù)劚救司帉懘a的習(xí)慣，很多人會(huì)問(wèn)我既然用的是jquery框架 為什么寫的組件不用Jquery那種形式？我當(dāng)時(shí)回答的是：每個(gè)人編寫代碼有每個(gè)人的習(xí)慣。但是我更想表達(dá)的是：這種編碼個(gè)人覺(jué)得 有一個(gè)很大的優(yōu)點(diǎn)，我不是非常依賴于Jquery框架，因?yàn)椴煌墓居胁煌目蚣?比如在淘寶用的kissy框架 在支付寶用的是支付寶框架 在百度用的是百度框架 在騰訊有騰訊的前端js框架 假如我的編寫代碼太依賴于jquery 那假如其他人想要用我代碼或者我自己某一天去做騰訊項(xiàng)目了 但是他們那邊要求我們只能用他們的JS框架 且又有這樣的功能？那如果我完全依賴jquery那種形式編碼 那現(xiàn)在我是不是要重新編碼呢？如果按照現(xiàn)在編碼方式去編碼 最多只是用了下jquery選擇器而已 那么只要改下選擇器 其他的代碼都可以直接拿來(lái)用，這樣的擴(kuò)張性非常好！我個(gè)人覺(jué)得作為一個(gè)專業(yè)的前端開(kāi)發(fā)，不僅僅只會(huì)一點(diǎn)點(diǎn)jquery做做東西，而更應(yīng)該考慮編寫高質(zhì)量的代碼，可能用jquery寫寫簡(jiǎn)單的代碼同樣能做好某個(gè)東西，但是有沒(méi)有考慮到假如某一天需求增加了某某功能 你是不是又要改代碼？能不能在以前的基礎(chǔ)上重新寫新的功能？而無(wú)需改代碼！
何謂高質(zhì)量的代碼？
個(gè)人覺(jué)得必須滿足以下幾點(diǎn)：
1. 可擴(kuò)展性。
2. 可維護(hù)性。
3. 可讀性,易使用性。
4. JS性能。
最主要滿足以上幾點(diǎn)。
好了 廢話不多說(shuō)了！轉(zhuǎn)主題，目前我做的這個(gè)發(fā)表微博效果 只是簡(jiǎn)單的 當(dāng)然騰訊發(fā)表微博有一些復(fù)雜的功能 比如說(shuō)下面有添加表情等等功能，目前沒(méi)有做成那樣的(工作量比較大)。
下面我寫的這個(gè)JS代碼需要注意2點(diǎn)：
1.每次發(fā)表下后 大家在說(shuō)列表會(huì)添加一條，目前沒(méi)有發(fā)ajax請(qǐng)求 后臺(tái)沒(méi)有記錄 所以刷新頁(yè)面 會(huì)清掉。
2. 時(shí)間是用的是客戶端時(shí)間 假如客戶端時(shí)間錯(cuò)誤的話 那么時(shí)間也會(huì)受影響。
其實(shí)思路很簡(jiǎn)單 看上面的效果就明白 所以思路在這邊不多說(shuō)了！或者我下面會(huì)提供壓縮demo 可以自己下載下來(lái)看看效果就ok了！每次發(fā)表一次后 都提供了回調(diào) 作為擴(kuò)展吧！當(dāng)然鼠標(biāo)移到某一項(xiàng)時(shí)候 會(huì)出現(xiàn)刪除按鈕 同時(shí)可以任意刪除某一項(xiàng)。直接貼代碼吧 也沒(méi)有什么好說(shuō)的！
HTML代碼如下：
<div id="msgBox">
<form>
<h2>來(lái) , 說(shuō)說(shuō)你在做什么 , 想什么</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>個(gè)字</span>
<input id="sendBtn" type="button" value="" title="快捷鍵 Ctrl+Enter" />
</p>
</div>
</form>
<div class="list">
<h3><span>大家在說(shuō)</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.目前沒(méi)有發(fā)ajax請(qǐng)求 后臺(tái)沒(méi)有記錄 所以刷新頁(yè)面 會(huì)清掉
* 2. 時(shí)間是用的是客戶端時(shí)間 假如客戶端時(shí)間錯(cuò)誤的話 那么時(shí)間也會(huì)受影響。
* 目前就這樣交互 具體的思路不太復(fù)雜 如果項(xiàng)目中用到這樣的 可以根據(jù)具體的需求更改
* @constructor Microblog
* @date 2013-12-23
* @author tugenhua
* @email 879083421@qq.com
*/
function Microblog(options) {
this.config = {
maxNum : 140, // 最大的字符數(shù)
targetElem : '.f-text', // 輸入框 或者文本域的class名
maxNumElem : '.maxNum', // 還能輸入多少字容器
sendBtn : '#sendBtn', // 廣播按鈕
face : '#face', // 表情容器
activeCls : 'active', // 鼠標(biāo)點(diǎn)擊輸入框add類
currentCls : 'current', // 鼠標(biāo)點(diǎn)擊face頭像時(shí) 增加的類名
inputID : '#userName', // 輸入框ID
textareaId : '#conBox', // 文本域ID
list : '#list-msg', // 大家在說(shuō)的容器
callback : null // 動(dòng)態(tài)廣播完后的回調(diào)函數(shù)
};
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;
// 點(diǎn)擊輸入框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);
});
});
// 點(diǎn)擊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();
},
/*
* 計(jì)算字符的長(zhǎng)度 包括中文 數(shù)字 英文等等
* @param str
* @return 字符串的長(zhǎng)度
*/
_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();
// 點(diǎn)擊廣播按鈕事件
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);
});
},
/*
* 點(diǎn)擊廣播按鈕事件
*/
_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('請(qǐng)輸入你的姓名');
return;
}else if(reg.test(textVal)) {
alert("隨便說(shuō)點(diǎn)什么吧!");
return;
}
if(maxNum * 1 < 0) {
alert('字符超過(guò)限制 請(qǐng)縮減字');
return;
}
// 本來(lái)是要發(fā)ajax請(qǐng)求的 但是這邊沒(méi)有后臺(tái)處理 所以目前只是客戶端渲染頁(yè)面
self._renderHTML(inputVal,textVal);
});
},
/*
* 把html結(jié)構(gòu)渲染出來(lái)
*/
_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();
},
/*
* 格式化時(shí)間, 如果為一位數(shù)時(shí)補(bǔ)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獲取url參數(shù)值的兩種方式
- JS URL傳中文參數(shù)引發(fā)的亂碼問(wèn)題
- JS獲取URL中參數(shù)值（QueryString）的4種方法分享
- javascript/jquery獲取地址欄url參數(shù)的方法
- js URL參數(shù)的拼接方法比較
- 在JavaScript中獲取請(qǐng)求的URL參數(shù)
- js修改地址欄URL參數(shù)解決url參數(shù)問(wèn)題
- JavaScript Base64編碼和解碼，實(shí)現(xiàn)URL參數(shù)傳遞。
- JavaScript URL參數(shù)讀取改進(jìn)版
- javascript 獲取url參數(shù)的正則表達(dá)式(用來(lái)獲取某個(gè)參數(shù)值)
- js獲取url中的參數(shù)且參數(shù)為中文時(shí)通過(guò)js解碼
- js實(shí)現(xiàn)將選中內(nèi)容分享到新浪或騰訊微博
- JS實(shí)現(xiàn)仿騰訊微博無(wú)刷新刪除微博效果代碼
- javascript實(shí)現(xiàn)的仿騰訊QQ窗口抖動(dòng)效果代碼
- js獲取騰訊視頻ID的方法
相關(guān)文章
JS 日期與時(shí)間戮相互轉(zhuǎn)化的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JS 日期與時(shí)間戮相互轉(zhuǎn)化的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的， 現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
web性能優(yōu)化之javascript性能調(diào)優(yōu)
本文詳細(xì)介紹Web 開(kāi)發(fā)中關(guān)于性能方面需要注意的一些小細(xì)節(jié)，從 JavaScript 本身著手，介紹了 JavaScript 中需要避免的一些函數(shù)的使用和編程規(guī)則，比如 eval 的弊端，function scope chain 以及 String 的用法等等2012-12-12
微信小程序?qū)崿F(xiàn)基于三元運(yùn)算驗(yàn)證手機(jī)號(hào)/姓名功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)基于三元運(yùn)算驗(yàn)證手機(jī)號(hào)/姓名功能,涉及三元運(yùn)算符的判定及字符串正則驗(yàn)證相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
原生js實(shí)現(xiàn)仿window10系統(tǒng)日歷效果的實(shí)例
下面小編就為大家?guī)?lái)一篇原生js實(shí)現(xiàn)仿window10系統(tǒng)日歷效果的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
JavaScript的設(shè)計(jì)模式經(jīng)典之代理模式
代理模式的定義是把對(duì)一個(gè)對(duì)象的訪問(wèn), 交給另一個(gè)代理對(duì)象來(lái)操作。接下來(lái)通過(guò)本文給大家介紹JavaScript的設(shè)計(jì)模式之代理模式，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
使用 Node.js 做 Function Test實(shí)現(xiàn)方法
這篇文章介紹了Node.js 做 Function Test實(shí)現(xiàn)方法，有需要的朋友可以參考一下2013-10-10
JavaScript獲取當(dāng)前運(yùn)行腳本文件所在目錄的方法
這篇文章主要介紹了JavaScript獲取當(dāng)前運(yùn)行腳本文件所在目錄的方法,涉及JavaScript文件目錄操作的相關(guān)技巧,需要的朋友可以參考下2016-02-02
JavaScript中this函數(shù)使用實(shí)例解析
這篇文章主要介紹了JavaScript中this函數(shù)使用實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
本文給大家分享的是使用javascript制作的2048小游戲的代碼，僅僅是想鍛煉下自己的編程代碼風(fēng)格，盡量做的規(guī)范些，小伙伴們多多給些建議。2015-03-03
在本問(wèn)中我們給大家總結(jié)了20種開(kāi)發(fā)中常用到的JS封裝方法，有需要的讀者們可以學(xué)習(xí)下。2018-10-10