前段时间博客经常被垃圾评论光顾,使用了Akismet插件但是评论信息都是发送到服务器他才可以验证,造成了服务器资源大量飙升。然后想着找个东西,能不能先在提交那里做个一层验证,防止机器评论。找了一下找到了不少插件什么的。最后选中了myQaptcha这个拖动插件,不用输入什么,只要鼠标拖动就行。在后台搜索安装之后,发现运行不了,打开控制台才发现这个插件依赖jquery,虽然我的主题默认加载了jquery,但是版本太高了,没有那个函数,谷歌了下,发现不少人有过这个问题。
意外的发现知更鸟博主修改了一下,让其支持高版本的 jquery。替换了原来的文件后,插件正常加载了。以前逛某宝时发现他的验证码,也是拖动式的,想着是不是可以修改成那样。毕竟都是拖动时,修改下css应该可以。毕竟原来的样式实在有点丑,和我的主题根本不搭。
本着折腾的精神,着手修改这个插件,把css修改了。file myQaptcha.jquery.css
/*****************/
/** QapTcha CSS **/
/*****************/
.QapTcha {padding:0 10px 10px 0;margin-top:10px;}
.QapTcha .clr{clear:both}
.QapTcha .bgSlider {width: 272px;height: 34px;background: #e8e8e8;float:left;}
.ui-draggable-rt{background: #fff url("../img/rt.png") no-repeat center;}
.ui-draggable-ok{background: #fff url("../img/ok.png") no-repeat center;}
.QapTcha .Slider {width: 40px;height: 32px;border: 1px solid #ccc;cursor: move;position: relative;}
.QapTcha .TxtStatus {width: 272px;height: 34px;position: absolute;text-align: center;line-height: 34px;moz-user-select: -moz-none;-moz-user-select: none;-o-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor: default;}
.QapTcha .dropSuccess {color: #fbfbfb;}
.okbg {height: 34px;background: #7ac23c;position: absolute;}
.QapTcha .dropError {color:#585858;moz-user-select: -moz-none;-moz-user-select: none;-o-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;}
发现好像只修改css没有用,拖动不了,嗯.....被挡住了,修改js文件 file myqaptcha.jquery.js
jQuery.QapTcha = {
build: function(options) {
var defaults = {
txtLock: '请按住滑块,拖动到最右边',
txtUnlock: '验证通过',
disabledSubmit: true,
autoRevert: true,
PHPfile: myQaptchaJqueryPage,
autoSubmit: false
};
if (this.length > 0)
return jQuery(this).each(function(i) {
/** Vars **/
var
opts = jQuery.extend(defaults, options),
jQuerythis = jQuery(this),
form = jQuery('form').has(jQuerythis),
Clr = jQuery('<div>', {
'class': 'clr'
}),
bgSlider = jQuery('<div>', {
'class': 'bgSlider'
}),
Slider = jQuery('<div>', {
'class': 'Slider ui-draggable-rt'
}),
Icons = jQuery('<div>', {
'class': 'Icons'
}),
dis = jQuery(''),
TxtStatus = jQuery('<div>', {
'class': ' TxtStatus dropError',
text: opts.txtLock
}),
okbg = jQuery('<div>', {
'class': 'okbg'
}),
inputQapTcha = jQuery('<input>', {
name: generatePass(32),
value: generatePass(7),
type: 'hidden'
});
/** Disabled submit button **/
if (opts.disabledSubmit) form.find('input[type=\'submit\']').attr('disabled', 'disabled');
/** Construct DOM **/
Icons.appendTo(jQuerythis);
okbg.insertAfter(Icons);
TxtStatus.insertAfter(okbg);
bgSlider.insertAfter(TxtStatus);
Clr.insertAfter(bgSlider);
dis.insertAfter(Clr);
inputQapTcha.appendTo(jQuerythis);
Slider.appendTo(bgSlider);
jQuerythis.show();
Slider.draggable({
drag: function(event, ui) {
okbg.css('width', ui.position.left);
},
revert: function() {
if (opts.autoRevert) {
if (parseInt(Slider.css("left")) >= 230)
return false;
else {
var ctime = 100; // 动画时间,毫秒
var cwidth = parseInt(Slider.css('left')); // 获取位置
var x = cwidth / ctime; // 求速度
interval = setInterval(_revert, 1);
function _revert() {
cwidth -= x;
if (cwidth > 0) {
Slider.css('left', cwidth);
okbg.css('width', cwidth);
} else {
Slider.css('left', 0);
okbg.css('width', 0);
clearInterval(interval);
return false;
}
}
}
}
},
containment: bgSlider,
axis: 'x',
stop: function(event, ui) {
if (ui.position.left >= 230) {
jQuery.post(opts.PHPfile, {
action: '30corg',
myQaptcha: inputQapTcha.attr('name')
},
function(data) {
if (!data.error) {
Slider.draggable('disable').css('cursor', 'default');
Slider.addClass('ui-draggable-ok').removeClass('ui-draggable-rt');
inputQapTcha.val('');
TxtStatus.text(opts.txtUnlock).addClass('dropSuccess').removeClass('dropError');
Icons.css('background-position', '-16px 0');
form.find('input[type=\'submit\']').removeAttr('disabled');
}
}, 'json');
}
}
});
function generatePass(nb) {
var chars = 'azertyupqsdfghjkmwxcvbn23456789AZERTYUPQSDFGHJKMWXCVBN_-#@';
var pass = '';
for (i = 0; i < nb; i++) {
var wpos = Math.round(Math.random() * chars.length);
pass += chars.substring(wpos, wpos + 1);
}
return pass;
}
});
}
};
jQuery.fn.QapTcha = jQuery.QapTcha.build;
最后给后台加上了登录验证,代码不贴了。
使用这个插件后,垃圾评论就没有出现过,myQaptcha做一级拦截,Akismet做二级过滤