JS 仿騰訊發(fā)表微博的效果代碼
最近2天研究了下 騰訊發(fā)表微博的效果 特此來分享下，效果如下：
在此分享前 來談?wù)劚救司帉懘a的習(xí)慣，很多人會問我既然用的是jquery框架 為什么寫的組件不用Jquery那種形式？我當(dāng)時回答的是：每個人編寫代碼有每個人的習(xí)慣。但是我更想表達的是：這種編碼個人覺得 有一個很大的優(yōu)點，我不是非常依賴于Jquery框架，因為不同的公司有不同的框架 比如在淘寶用的kissy框架 在支付寶用的是支付寶框架 在百度用的是百度框架 在騰訊有騰訊的前端js框架 假如我的編寫代碼太依賴于jquery 那假如其他人想要用我代碼或者我自己某一天去做騰訊項目了 但是他們那邊要求我們只能用他們的JS框架 且又有這樣的功能？那如果我完全依賴jquery那種形式編碼 那現(xiàn)在我是不是要重新編碼呢？如果按照現(xiàn)在編碼方式去編碼 最多只是用了下jquery選擇器而已 那么只要改下選擇器 其他的代碼都可以直接拿來用，這樣的擴張性非常好！我個人覺得作為一個專業(yè)的前端開發(fā)，不僅僅只會一點點jquery做做東西，而更應(yīng)該考慮編寫高質(zhì)量的代碼，可能用jquery寫寫簡單的代碼同樣能做好某個東西，但是有沒有考慮到假如某一天需求增加了某某功能 你是不是又要改代碼？能不能在以前的基礎(chǔ)上重新寫新的功能？而無需改代碼！
何謂高質(zhì)量的代碼？
個人覺得必須滿足以下幾點：
1. 可擴展性。
2. 可維護性。
3. 可讀性,易使用性。
4. JS性能。
最主要滿足以上幾點。
好了 廢話不多說了！轉(zhuǎn)主題，目前我做的這個發(fā)表微博效果 只是簡單的 當(dāng)然騰訊發(fā)表微博有一些復(fù)雜的功能 比如說下面有添加表情等等功能，目前沒有做成那樣的(工作量比較大)。
下面我寫的這個JS代碼需要注意2點：
1.每次發(fā)表下后 大家在說列表會添加一條，目前沒有發(fā)ajax請求 后臺沒有記錄 所以刷新頁面 會清掉。
2. 時間是用的是客戶端時間 假如客戶端時間錯誤的話 那么時間也會受影響。
其實思路很簡單 看上面的效果就明白 所以思路在這邊不多說了！或者我下面會提供壓縮demo 可以自己下載下來看看效果就ok了！每次發(fā)表一次后 都提供了回調(diào) 作為擴展吧！當(dāng)然鼠標(biāo)移到某一項時候 會出現(xiàn)刪除按鈕 同時可以任意刪除某一項。直接貼代碼吧 也沒有什么好說的！
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. 時間是用的是客戶端時間 假如客戶端時間錯誤的話 那么時間也會受影響。
* 目前就這樣交互 具體的思路不太復(fù)雜 如果項目中用到這樣的 可以根據(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)點擊輸入框add類
currentCls : 'current', // 鼠標(biāo)點擊face頭像時 增加的類名
inputID : '#userName', // 輸入框ID
textareaId : '#conBox', // 文本域ID
list : '#list-msg', // 大家在說的容器
callback : null // 動態(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;
// 點擊輸入框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();
},
/*
* 計算字符的長度 包括中文 數(shù)字 英文等等
* @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結(jié)構(gòu)渲染出來
*/
_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ù)時補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ā)的亂碼問題
- JS獲取URL中參數(shù)值（QueryString）的4種方法分享
- javascript/jquery獲取地址欄url參數(shù)的方法
- js URL參數(shù)的拼接方法比較
- 在JavaScript中獲取請求的URL參數(shù)
- js修改地址欄URL參數(shù)解決url參數(shù)問題
- JavaScript Base64編碼和解碼，實現(xiàn)URL參數(shù)傳遞。
- JavaScript URL參數(shù)讀取改進版
- javascript 獲取url參數(shù)的正則表達式(用來獲取某個參數(shù)值)
- js獲取url中的參數(shù)且參數(shù)為中文時通過js解碼
- js實現(xiàn)將選中內(nèi)容分享到新浪或騰訊微博
- JS實現(xiàn)仿騰訊微博無刷新刪除微博效果代碼
- javascript實現(xiàn)的仿騰訊QQ窗口抖動效果代碼
- js獲取騰訊視頻ID的方法
相關(guān)文章
使用Github?Actions發(fā)布npm包完整過程詳解
本文包含本地發(fā)布npm包發(fā)布流程,?和?github?action自動發(fā)布npm包流程,幫助你更好的發(fā)布自己或公司的npm包,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要介紹了JavaScript中使用數(shù)組方法匯總的相關(guān)資料,需要的朋友可以參考下2016-02-02
js如何構(gòu)造elementUI樹狀菜單的數(shù)據(jù)結(jié)構(gòu)詳解
由于業(yè)務(wù)需要，要求實現(xiàn)樹形菜單，且菜單數(shù)據(jù)由后臺返回，下面這篇文章主要給大家介紹了關(guān)于js如何構(gòu)造elementUI樹狀菜單的數(shù)據(jù)結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2021-05-05
一文詳解JavaScript中的相等運算符與類型轉(zhuǎn)換
在?JavaScript?編程中,相等運算符和類型轉(zhuǎn)換是理解語言行為的關(guān)鍵部分,雖然這些概念看似簡單,但它們的細(xì)節(jié)可能會導(dǎo)致意想不到的結(jié)果,本文將深入探討?==?和?===?運算符的區(qū)別、對象比較、以及?JavaScript?中的顯式和隱式類型轉(zhuǎn)換,需要的朋友可以參考下2024-07-07
webpack如何自動生成網(wǎng)站圖標(biāo)詳解
這篇文章主要給大家介紹了關(guān)于webpack如何自動生成網(wǎng)站圖標(biāo)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-01-01
bootstrap-Treeview實現(xiàn)級聯(lián)勾選
這篇文章主要為大家詳細(xì)介紹了bootstrap-Treeview實現(xiàn)級聯(lián)勾選，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家整理了關(guān)于Bootstrap排版的慕課筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
在js中phototype是JS中比較難理解的一個部分，下面通過本篇文章給大家介紹js中的prototype，需要的朋友可以參考下2015-09-09
關(guān)于javascript的“靜態(tài)類"...2006-10-10
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)商品篩選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10