快捷留言功能，就是您現(xiàn)在看到在右側(cè)浮動(dòng)的那個(gè)小玩意，通過它可以直接提交留言并推薦，您想在博客里加上這個(gè)功能嗎？

別急，方法非常簡單，還是先聽我說說它的來歷吧...

最開始，快捷留言這個(gè)功能要追溯到發(fā)表[AjaxControlToolkitTests自動(dòng)測試框架完全解析之一：架構(gòu)篇]這篇文章的時(shí)候，當(dāng)時(shí)它純粹是那篇文章的副產(chǎn)品，本來沒太在意，本想只是給像我一樣的懶人準(zhǔn)備的一條捷徑而已，后來因?yàn)闆]有提示這個(gè)功能會(huì)直接自動(dòng)提交留言，還引起了幾枚同學(xué)的不滿意，于是后來又在醒目位置加上了提示：[提示：快捷鏈接會(huì)直接推薦并提交留言信息。]，才平息了局勢；

再后來，有部分同學(xué)可能是鼠標(biāo)太高級(jí)，連擊速度特別快的原因，每次使用我的快捷留言功能都會(huì)把五個(gè)(我要頂，路過，期待下一篇，太棒了，我要推薦)快捷鏈接都全部點(diǎn)一遍才過癮，本來嘛，我放那么多快捷鏈接是希望給大家多提供幾種選擇，本意是不希望您每個(gè)都點(diǎn)一遍的，結(jié)果本來是出于為懶人提供的懶工具，卻讓人突然變勤勞了，實(shí)在是罪過。大家都這么勤勞，我可受不起，留言搞得跟聊天室刷屏一樣，究其根本，還是原來的程序?qū)懙锰唵?#xff0c;沒有考慮細(xì)節(jié)，于是現(xiàn)在只留下了兩個(gè)快捷鏈接，并且在程序上加了限制，這樣就不至于會(huì)刷屏了。

再再后來，就是最近幾天，我發(fā)現(xiàn)快捷留言的功能被越來越多的人加到了自己的博客里，昨天看到這篇文章(here)更是幾乎原封不動(dòng)地白盒拷貝了我的快捷留言功能的代碼。這些應(yīng)用讓我重新思考快捷留言這個(gè)小功能的定位，客觀地說，這個(gè)功能其實(shí)是對博客園現(xiàn)有留言功能的一個(gè)很好的擴(kuò)展！那么，與其讓人反復(fù)地去重新制作輪子，為啥不提供一個(gè)公共的擴(kuò)展給大家直接使用呢？
基于以上歷史原因，經(jīng)過幾個(gè)小時(shí)的努力，新版的通用快捷留言功能誕生了！這個(gè)版本的目標(biāo)就是做到簡單通用，其他博客園的博主只需簡單的引用就可以直接在自己的博客里添加快捷留言功能了！目前該功能定為v1.0bate版，還有一些特性待完善，未來版本會(huì)提供更多的用戶自定義設(shè)置功能，有什么新的想法也會(huì)逐步加進(jìn)去，所以如果您希望未來能夠自動(dòng)升級(jí)新版本，就直接引用我這里的文件即可，所有使用這個(gè)腳本的用戶都會(huì)同時(shí)同步更新。
其實(shí)用法真的很簡單，只需要在[后臺(tái)管理]->[設(shè)置]->[頁首Html代碼]的文本框里，填入下面這句話就行了。

//放在[后臺(tái)管理]->[設(shè)置]->[頁首Html代碼]的文本框里<script language="javascript" type="text/javascript" src="http://files.cnblogs.com/justinw/jMsg.js"></script>

具體如下圖所示：

這里就是整個(gè)通用快捷留言功能的源代碼了，時(shí)間很短，代碼沒有經(jīng)過嚴(yán)格的測試，所以也請大家先實(shí)際使用測試一下，歡迎您批評指正！代碼都很簡單，我也加了很多注釋，這里就不再累述了，有問題直接留言就行了。

//作者：Justin //出處：http://justinw.cnblogs.com/ //版權(quán)：轉(zhuǎn)載請保留出處即可。 //版本：V1.0 beta //最后更新：201003300330 //備注：如有問題，可以優(yōu)先到 http://www.cnblogs.com/justinw/archive/2010/03/30/1700190.html 留言提問。//--begin--jMsg--- function jMsg() { }//初始化動(dòng)作 jMsg.prototype.setup = function() {jMsg.loadEvent(this.combat);//jMsg.loadEvent(jMsg.msgDIV);jMsg.msgDIV(); }//提交留言信息 jMsg.prototype.post = function(msg) {//這里通過判斷HaveUp標(biāo)志位，來防止反復(fù)提交相同留言。if (window.top.HaveUp) {alert('您已經(jīng)頂過了！謝謝朋友 ：）');return;}var txt = document.getElementById('tbCommentBody');if (txt != null) {txt.style.backgroundColor = "#E4F5FF";var date = new Date();txt.value = msg;txt.focus();//如果提交過一次快捷留言，HaveUp就設(shè)置為true//每次重新進(jìn)入頁面，HaveUp就會(huì)被初始化。window.top.HaveUp = true;//這是博客園提交留言用的方法，通過這里正是提交留言。//如果沒有登錄就直接在客戶端調(diào)用這個(gè)方法，內(nèi)部會(huì)拋個(gè)錯(cuò)。(博客園代碼問題，沒有判空)PostComment();}else {//目前博客園功能上約束只有登錄后才能提交留言。//如果找不到tbCommentBody元素，可以認(rèn)為當(dāng)前用戶沒有登錄。alert("使用博客園留言功能需要先登錄哦！");} }//推薦 jMsg.prototype.recommend = function() {var diggit = jMsg.getElementsByClassName('diggit');if ((diggit) && (diggit[0])) {diggit[0].onclick();}else {alert("Debug:推薦按鈕的ClassName改名了！");} }//反對 jMsg.prototype.combat = function() {var buryitMsg = function() {//目前博客園推薦和反對都是不記名的，被反對了當(dāng)然希望知道原因啦。//這個(gè)功能只能做到防君子不防小人，僅僅是給了個(gè)提示而已。 var txt = document.getElementById('tbCommentBody');if (txt != null) {alert('這枚同學(xué)，非常希望能聽到您的寶貴意見，請賜教...');txt.style.backgroundColor = "#fe9ab3";txt.focus();}}var buryit = jMsg.getElementsByClassName('buryit');if ((buryit) && (buryit[0])) {jMsg.addEvent(buryit[0], "click", buryitMsg);} }//提交留言的同時(shí)推薦 jMsg.prototype.superPost = function(msg) {this.post(msg);this.recommend(); }//附加onload事件 jMsg.loadEvent = function(fn) {var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = fn;} else {window.onload = function() {oldonload();fn();}} }//附加事件 jMsg.addEvent = function(obj, type, fn) {if (obj.addEventListener)obj.addEventListener(type, fn, true);else if (obj.attachEvent) {obj.attachEvent("on" + type, function() {fn();});} }//通過ClassName找到DOM元素 jMsg.getElementsByClassName = function(n) {var el = [],_el = document.getElementsByTagName('*');for (var i = 0; i < _el.length; i++) {if (_el[i].className == n) {el[el.length] = _el[i];}}return el; }//快捷留言的浮動(dòng)導(dǎo)航條 jMsg.msgDIV = function() {//是否出現(xiàn)浮動(dòng)條。if (!(window.location.href.indexOf(".html") > -1)) return;//動(dòng)態(tài)計(jì)算浮動(dòng)滾動(dòng)條的位置lastScrollY = 0;var beat = function() {var diffY;if (document.documentElement && document.documentElement.scrollTop)diffY = document.documentElement.scrollTop;else if (document.body)diffY = document.body.scrollTopelse{ /*Netscape stuff*/ }percent = .1 * (diffY - lastScrollY);if (percent > 0) percent = Math.ceil(percent);else percent = Math.floor(percent);document.getElementById("msgDiv").style.top = parseInt(document.getElementById("msgDiv").style.top) + percent + "px";lastScrollY = lastScrollY + percent;}msgDivCode = "<div id=\"msgDiv\" style='z-index:2010; right:2px; top:400px; position:absolute;'><strong><span style=\"color: red; font-size: 10pt;\">[快捷留言：點(diǎn)擊下面鏈接后會(huì)直接提交留言信息。]</span></strong><br /><img src=\"http://images.cnblogs.com/cnblogs_com/justinw/24983/o_hel.gif\" /><a οnclick=\"$jMsg.superPost('好貼!我頂你!');return false;\" href=\"###\"><span style=\"font-size: 30pt;\">我要頂！</span></a>?<a οnclick=\"$jMsg.superPost('好貼!路過!');return false;\" href=\"###\"><span style=\"font-size: 18pt;\">路過</span></a></div>";document.write(msgDivCode);window.setInterval(beat, 120); } //--end--jMsg--- //todo:提供設(shè)置是否顯示浮動(dòng)條的接口 //todo:提供自定義浮動(dòng)條圖片的接口 //todo:提供完全自定義浮動(dòng)條內(nèi)容的接口 //todo:提供浮動(dòng)條以外的交互模式接口 var $jMsg = new jMsg(); $jMsg.setup();

Update:201003301250->為維護(hù)博客園的推薦排名機(jī)制的公平有效和世界和平，特將superPost方法修正為不默認(rèn)自動(dòng)推薦文章，而是彈出提示框詢問用戶“是否要同時(shí)推薦該篇文章”，原來的[路過]鏈接改為使用post方法提交，只提交快捷留言信息，不會(huì)自動(dòng)推薦：

jMsg.prototype.superPost = function(msg) {this.post(msg);//這里增加詢問功能，不支持自動(dòng)直接推薦if (confirm("您是否要同時(shí)推薦該篇文章呢？")) {this.recommend();} }

Update:201004020225->jMsg.js已經(jīng)更新到V2版，功能和交換模式都有很大改變，具體參考下圖和最新的V2升級(jí)版文章。

轉(zhuǎn)載于:https://www.cnblogs.com/justinw/archive/2010/03/30/1700190.html

總結(jié)

以上是生活随笔為你收集整理的[JavaScript]只需一行代码，轻松搞定快捷留言功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。