JavaScript 轻松搞定快捷留言功能 只需一行代码


Posted in Javascript onApril 01, 2010

别急,方法非常简单,还是先听我说说它的来历吧...

最开始,快捷留言这个功能要追溯到发表[AjaxControlToolkitTests自动测试框架完全解析之一:架构篇]这篇文章的时候,当时它纯粹是那篇文章的副产品,本来没太在意,本想只是给像我一样的懒人准备的一条捷径而已,后来因为没有提示这个功能会直接自动提交留言,还引起了几枚同学的不满意,于是后来又在醒目位置加上了提示:[提示:快捷链接会直接推荐并提交留言信息。],才平息了局势;

再后来,有部分同学可能是鼠标太高级,连击速度特别快的原因,每次使用我的快捷留言功能都会把五个(我要顶,路过,期待下一篇,太棒了,我要推荐)快捷链接都全部点一遍才过瘾,本来嘛,我放那么多快捷链接是希望给大家多提供几种选择,本意是不希望您每个都点一遍的,结果本来是出于为懒人提供的懒工具,却让人突然变勤劳了,实在是罪过。大家都这么勤劳,我可受不起,留言搞得跟聊天室刷屏一样,究其根本,还是原来的程序写得太简单,没有考虑细节,于是现在只留下了两个快捷链接,并且在程序上加了限制,这样就不至于会刷屏了。

再再后来,就是最近几天,我发现快捷留言的功能被越来越多的人加到了自己的博客里,昨天看到这篇文章(here)更是几乎原封不动地白盒拷贝了我的快捷留言功能的代码。这些应用让我重新思考快捷留言这个小功能的定位,客观地说,这个功能其实是对博客园现有留言功能的一个很好的扩展!那么,与其让人反复地去重新制作轮子,为啥不提供一个公共的扩展给大家直接使用呢?
基于以上历史原因,经过几个小时的努力,新版的通用快捷留言功能诞生了!这个版本的目标就是做到简单通用,其他博客园的博主只需简单的引用就可以直接在自己的博客里添加快捷留言功能了!目前该功能定为v1.0bate版,还有一些特性待完善,未来版本会提供更多的用户自定义设置功能,有什么新的想法也会逐步加进去,所以如果您希望未来能够自动升级新版本,就直接引用我这里的文件即可,所有使用这个脚本的用户都会同时同步更新。
其实用法真的很简单,只需要在[后台管理]->[设置]->[页首Html代码]的文本框里,填入下面这句话就行了。

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

具体如下图所示:
JavaScript 轻松搞定快捷留言功能 只需一行代码
这里就是整个通用快捷留言功能的源代码了,时间很短,代码没有经过严格的测试,所以也请大家先实际使用测试一下,欢迎您批评指正!代码都很简单,我也加了很多注释,这里就不再累述了,有问题直接留言就行了。
//作者:Justin 
//版权:转载请保留出处即可。 
//版本:V1.0 beta 
//最后更新:201003300330 
//备注:如有问题,可以优先到 http://www.cnblogs.com/justinw/archive/2010/03/30/1700190.html 留言提问。 //--begin--jMsg--- 
function jMsg() { } 
//初始化动作 
jMsg.prototype.setup = function() { 
jMsg.loadEvent(this.combat); 
//jMsg.loadEvent(jMsg.msgDIV); 
jMsg.msgDIV(); 
} 
//提交留言信息 
jMsg.prototype.post = function(msg) { 
//这里通过判断HaveUp标志位,来防止反复提交相同留言。 
if (window.top.HaveUp) { 
alert('您已经顶过了!谢谢朋友 :)'); 
return; 
} 
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; 
//这是博客园提交留言用的方法,通过这里正是提交留言。 
//如果没有登录就直接在客户端调用这个方法,内部会抛个错。(博客园代码问题,没有判空) 
PostComment(); 
} 
else { 
//目前博客园功能上约束只有登录后才能提交留言。 
//如果找不到tbCommentBody元素,可以认为当前用户没有登录。 
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() { 
//目前博客园推荐和反对都是不记名的,被反对了当然希望知道原因啦。 
//这个功能只能做到防君子不防小人,仅仅是给了个提示而已。 
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); 
} 
} 
//提交留言的同时推荐 
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; 
} 
//快捷留言的浮动导航条 
jMsg.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; 
} 
msgDivCode = "<div id=\"msgDiv\" style='z-index:2010; right:2px; top:400px; position:absolute;'><strong><span style=\"color: red; font-size: 10pt;\">[快捷留言:点击下面链接后会直接提交留言信息。]</span></strong><br /><img src=\"/upload/2010-4/20100401005300831.gif\" /><a onclick=\"$jMsg.superPost('好贴!我顶你!');return false;\" href=\"###\"><span style=\"font-size: 30pt;\">我要顶!</span></a> <a onclick=\"$jMsg.superPost('好贴!路过!');return false;\" href=\"###\"><span style=\"font-size: 18pt;\">路过</span></a></div>"; 
document.write(msgDivCode); 
window.setInterval(beat, 120); 
} 
//--end--jMsg--- 
//todo:提供设置是否显示浮动条的接口 
//todo:提供自定义浮动条图片的接口 
//todo:提供完全自定义浮动条内容的接口 
//todo:提供浮动条以外的交互模式接口 
var $jMsg = new jMsg(); 
$jMsg.setup();

Update:201003301250->为维护博客园的推荐排名机制的公平有效和世界和平,特将superPost方法修正为不默认自动推荐文章,而是弹出提示框询问用户“是否要同时推荐该篇文章”,原来的[路过]链接改为使用post方法提交,只提交快捷留言信息,不会自动推荐:
jMsg.prototype.superPost = function(msg) { 
this.post(msg); 
//这里增加询问功能,不支持自动直接推荐 
if (confirm("您是否要同时推荐该篇文章呢?")) { 
this.recommend(); 
} 
}

作者:Justin
Javascript 相关文章推荐
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
jQuery 使用个人心得
Feb 26 Javascript
javascript RadioButtonList获取选中值
Apr 09 Javascript
javascript 可以拖动的DIV(二)
Jun 26 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
javascript Math.random()随机数函数
Nov 04 Javascript
jquery随意添加移除html的实现代码
Jun 21 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
Javascript 类与静态类的实现
Apr 01 #Javascript
多浏览器支持的右下角浮动窗口
Apr 01 #Javascript
js 多浏览器分别判断代码
Apr 01 #Javascript
JS 遮照层实现代码
Mar 31 #Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 #Javascript
jQuery 遍历json数组的实现代码
Sep 22 #Javascript
Javascript load Page,load css,load js实现代码
Mar 31 #Javascript
You might like
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
eclipse php wamp配置教程
2016/06/30 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
Python类定义和类继承详解
2015/05/08 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
Python中dict和set的用法讲解
2019/03/28 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
绿色环保标语
2014/06/12 职场文书
计划生育证明格式范本
2014/09/12 职场文书
高中学生自我评价范文
2014/09/23 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
大学生操行评语大全
2014/12/31 职场文书
升职自我推荐信范文
2015/03/25 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python