前天熬了大半宿发了一篇[一行代码轻松搞定快捷留言功能]，同时发布了V1.0beta版的快捷留言功能和源代码，之所以是beta版，就是当时感觉虽然基本功能有了，但是还不够完善，特性也不一定合理，今天不知不觉又弄到了这个时候，这次对上一版做了很大改进：
首先，原来自动提交留言信息的同时会自动推荐，大量的推荐数，直接影响了博客园的推荐排名机制，所以后来在第一时间修改成了询问是否要推荐的交互模式！
其次，虽然快捷功能有了，并且很好用，但是满屏幕的“好贴！我顶你！”也确实有些审美疲劳了，并且没什么实际意义，留言还是要能产生互动才有价值，所以V2这版重点在交互模式上改进原有的形式，新版快捷留言相当于把博客园原有的留言框和推荐都浮动起来显示在屏幕右侧垂直居中的位置，目的就是让使用者可以非常方便地快捷留言。
最后，新版快捷留言功能对上一版的使用者完全支持透明升级，也就是说原来使用上一版的用户，现在自己的博客里看到的应该已经是最新版本的界面和功能了！这里再重新说一遍jMsg的使用方法，跟以前完全一样：
其实用法真的很简单，只需要在[后台管理]->[设置]->[页首Html代码]的文本框里，填入下面这句话就行了:

1
2
//放在[后台管理]->[设置]->[页首Html代码]的文本框里
<script language="javascript" type="text/javascript" src="http://files.cnblogs.com/justinw/jMsg.js"></script>

具体如下图所示：

新版jMsg具体的功能细节，上图中已经描述很详细了，就不在累述，下面是新版的源代码，同样还有很多功能特性待完善，比如界面效果可以再美化一下，现在只提供了最简约的风格，不论是代码还是功能设计，都欢迎您批评指正。代码的组织形式同上一版比有了很大改动，上一版的源代码在这里可以获得。

新版的源代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
//作者：Justin
//出处：http://justinw.cnblogs.com/
//版权：转载请保留出处即可。
//版本：V2.0
//最后更新：201004020037
//备注：如有问题，可以优先到 http://www.cnblogs.com/justinw/archive/2010/03/30/1700190.html 留言提问。
//更新：
//1.v2在V1beta的基础上做了很大改进，交互模式和功能合理性都有本质提高。
//--begin--jMsg---
jMsg = function() {
    var chkRecomend = false;
}
jMsg.prototype = {
    //初始化动作
    initialize: function() {
        jMsg.loadEvent(this.combat);
        this.msgDIV();
    },
    dispose: function() {
        //todoSomething...
    },
    //提交留言信息
    post: function(msg) {
        //这里通过判断HaveUp标志位，来防止反复提交相同留言。
        if (window.top.HaveUp) {
            alert('您已经顶过了！谢谢朋友 ：）');
            return false;
        }
        if (msg.trim().length == 0) {
            alert('怎么也得留一个字吧！');
            return false;
        }
        else if (msg.trim().length > 1000) {
            alert('这枚同学，快捷留言最多支持1000个字符！');
            return false;
        }
        var txt = document.getElementById('tbCommentBody');
        if (txt != null) {
            txt.style.backgroundColor = "#E4F5FF";
            var date = new Date();
            txt.value = msg;
            txt.focus();
            //如果提交过一次快捷留言，HaveUp就设置为true
            //每次重新进入页面，HaveUp就会被初始化。
            window.top.HaveUp = true;
            //这是博客园提交留言用的方法，通过这里正是提交留言。
            //如果没有登录就直接在客户端调用这个方法，内部会抛个错。(博客园代码问题，没有判空)
            var rlt = PostComment();
            this.setMsgText("");
            return true;
        }
        else {
            //目前博客园功能上约束只有登录后才能提交留言。
            //如果找不到tbCommentBody元素，可以认为当前用户没有登录。
            alert("使用博客园留言功能需要先登录哦！");
            return false;
        }
    },
    //推荐
    recommend: function() {
        var diggit = jMsg.getElementsByClassName('diggit');
        if ((diggit) && (diggit[0])) {
            diggit[0].onclick();
        }
        else {
            alert("Debug:推荐按钮的ClassName改名了！");
        }
    },
    //反对
    combat: function() {
        var buryitMsg = function() {
            //目前博客园推荐和反对都是不记名的，被反对了当然希望知道原因啦。
            //这个功能只能做到防君子不防小人，仅仅是给了个提示而已。       
            var txt = document.getElementById('tbCommentBody');
            if (txt != null) {
                alert('这枚同学，非常希望能听到您的宝贵意见，请赐教...');
                txt.style.backgroundColor = "#fe9ab3";
                txt.focus();
            }
        }
        var buryit = jMsg.getElementsByClassName('buryit');
        if ((buryit) && (buryit[0])) {
            jMsg.addEvent(buryit[0], "click", buryitMsg);
        }
    },
    //提交留言的同时推荐
    superPost: function(msg) {
        if (this.post(msg)) {
            //这里增加询问功能，不支持自动直接推荐
            if (this.chkRecomend) {
                this.recommend();
            }
            else {
                if (confirm("您是否要同时推荐该篇文章呢？")) {
                    this.recommend();
                }
            }
        }
    },
    //快捷留言的浮动导航条
    msgDIV: function() {
        //是否出现浮动条。
        if (!(window.location.href.indexOf(".html") > -1)) return;
        //动态计算浮动滚动条的位置
        lastScrollY = 0;
        var beat = function() {
            var diffY;
            if (document.documentElement && document.documentElement.scrollTop)
                diffY = document.documentElement.scrollTop;
            else if (document.body)
                diffY = document.body.scrollTop
            else
            { /*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;
        }
         
        document.write(this.getMsgBoxHTML());
        window.setInterval(beat, 120);
    },
    getMsgBoxHTML: function() {
        var _HTML = "";
        _HTML += "<div id=\"msgDiv\" style=\"width:265px;z-index:2010; right:15px; top:400px; position:absolute;\">";
        _HTML += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";
        _HTML += "<tbody>";
        _HTML += "<tr><td colspan=\"2\"><textarea id=\"jmsg\" title=\"使用快捷留言，想说就说！\" style=\"border-color:navy;background-color:transparent;width:265px;height:100px\">文章不错，支持！</textarea></td></tr>";
        _HTML += "<tr><td style=\"width:200px\"><input title=\"Alt+Enter\" name=\"postjMsg\" type=\"submit\"onclick=\"$jMsg.superPost($jMsg.getMsgText());return false;\" value=\"提交\" style=\"width:80px\"/>";
        _HTML += " <a id =\"passBy\" onclick=\"$jMsg.setMsgText('路过...');return false;\" href=\"###\">路过</a> ";
        _HTML += "<input name=\"chkjMsg\" type=\"checkbox\" onclick=\"$jMsg.setChkRecomend(this.checked);\"/>推荐</td><td style=\"font-size:small;text-align:right;vertical-align:top\">2010©<a href=\"http://justinw.cnblogs.com\" target=\"_blank\">Justin</a></td></tr>";
        _HTML += "</tbody></table>";
        _HTML += "</div>";
        return _HTML;
    },
    setMsgText: function(txt) {
        var area = document.getElementById("jmsg");
        area.value = txt;
    },
    getMsgText: function() {
        var area = document.getElementById("jmsg");
        return area.value;
    },
    setChkRecomend: function(val) {
        this.chkRecomend = val;
    }
}
//附加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;
}
String.prototype.trim = function() {
    return this.replace(/(^\s*)|(\s*$)/g, "");
}
//--end--jMsg---
//todo:提供设置是否显示浮动条的接口
//todo:提供完全自定义浮动条内容的接口
//todo:提供浮动以外的交互模式接口
var $jMsg = new jMsg();
$jMsg.initialize(); 本文转自Justin博客园博客，原文链接：http://www.cnblogs.com/justinw/archive/2010/04/02/1702763.html，如需转载请自行联系原作者

[JavaScript]只需一行代码,轻松搞定快捷留言-V2升级版相关推荐

  1. [JavaScript]只需一行代码,轻松搞定快捷留言-V2升级版javascript

    评论 2243573 #1楼 回复 引用 查看 文章不错,支持! 2010-04-02 02:52 | 夜雨瞳 #2楼 回复 引用 查看 文章不错,支持! 2010-04-02 07:56 | kea ...

  2. 手机如何去视频水印？只需几步轻松搞定

    手机如何去视频水印?只需几步轻松搞定 很多人对于ps相关的功能有极大的误解,认为必须通过专业的软件才能够实现,而且很多专业的ps软件并不是仅仅拥有一部手机就能够使用的,还需要具备一定配置的电脑. 其实 ...

  3. 重磅！百度飞桨开源语音基础模型库|中英文语音识别、语音翻译、语音合成、声音分类通通一行代码轻松搞定...

    导读 要说生活里最常见的AI应用场景,语音合成与识别当属大家最为耳熟能详的场景之一了. 寻常到平时地图导航的播报.微信语音转文字.手机语音输入,以及小度智能音箱,都离不开语音技术的加持. 语音技术到底 ...

  4. [JavaScript]只需一行代码，轻松搞定快捷留言功能

    快捷留言功能,就是您现在看到在右侧浮动的那个小玩意,通过它可以直接提交留言并推荐,您想在博客里加上这个功能吗? 别急,方法非常简单,还是先听我说说它的来历吧... 最开始,快捷留言这个功能要追溯到发表 ...

  5. 一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题? 百度源代码如下: <!Doctype html& ...

  6. php导航代码在线编辑器,只需一行代码,轻松实现一个在线编辑器

    在大部分人眼里,技术宅给人的印象是沉默寡言,总摸不透他心里想些什么,彼此都保持距离.作为半个程序员,我觉得真正的技术宅大部分时间都在找乐子,鼓捣各种想法,和大部分人的极客心理是一样的,程序员也还爱讲笑 ...

  7. java request 克隆_Java 复制HttpServletRequest InputStream的方法 只需2步轻松搞定

    你可能很疑惑,为什么request对象中的InputStream或者Reader只能使用一次? 原理很简单,可以把流比喻成水,request里面的inputStream就好比杯子中的水.试问杯子中的水 ...

  8. 抽奖随机滚动_手把手教你制作EXCEL抽奖器，只需两步轻松搞定

    [例一]利用CHOOSE函数和RANDBETWEEN函数进行抽奖设置.如下图: 目的:在B列随机生成1-50的随机整数,取号码末尾数值,对应奖品,当末尾数值大于5时,为空奖. 操作: 第一步:在B2单 ...

  9. html 简繁文件转换器,几行代码轻松搞定网页的简繁转换

    几行代码轻松搞定网页的简繁转换以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 对网页进行简繁字体转换的方法一般有两种 ...

最新文章

  1. 数据库为什么使用B+树而不是B树
  2. php如何存到磁盘,php缓存----磁盘缓存
  3. 简述delete与delete[]的区别
  4. canvas 加载图片
  5. SpringBoot整合WebService实例
  6. Vbox安装增强功能
  7. 2.sklearn—评价指标大全（平均误差、均方误差、混淆矩阵、准确率、查全率、查准率、召回率、特异度，F1-score、G-mean、KS值、ROC曲线、AUC值、损失函数、结构风险最小）
  8. MATLAB常用快捷键总结
  9. 破解老程序员的迷茫病——JUST DO IT
  10. 自动获取win10锁屏壁纸脚本
  11. 在Clojure For The Brave And True中遇到的emacs配置问题
  12. 覆盖20个主流Niche高DA可投稿的谷歌博客外链分享
  13. JavaScript--JavaScript和web API、JS（提供案例）
  14. 黑客基础——基础隐写术
  15. 睡眠 应该用 a加权 c加权_创3年新高的创业板，应该如何选择
  16. BZOJ#3267. KC采花
  17. 三国赵云传1---加血代码
  18. OSChina 周一乱弹 ——个子不高就找不到女友了么？
  19. 一些小技巧，想起来了就码上！
  20. 桃子叔叔为您解析webpack-dev-server主要的配置属性

热门文章

  1. Ping Tracert result Command explanation
  2. POCO：InvalidOperationError：Mapping and metadata information could not be found for Entity Type
  3. Yii2 使用 QQ 和 Weibo 第三方登录源码
  4. spring aop实现log 日志跟踪
  5. PhpStorm+PhpStudy开发环境的配置
  6. vim的基本快捷操作（二）——可视模式
  7. React的深入解密一
  8. dtrace-debug
  9. 关于如何在你的Web项目中实现对空间数据访问权限的控制（一）
  10. iOS开发CocoaPods使用