更新脚本:行为式滑块验证码同步更新到最新

This commit is contained in:
Argo Zhang 2019-04-01 09:05:23 +08:00
parent ee5a8cd74f
commit 5e94c74f84
3 changed files with 31 additions and 9 deletions

View File

@ -526,3 +526,11 @@ input.pending {
padding: 0.375rem 1.5rem;
font-size: 1rem;
}
.refreshIcon {
color: rgba(255,255,255,.8);
}
.refreshIcon:hover {
color: #fff;
}

View File

@ -19,7 +19,8 @@
loadingText: '正在加载中...',
failedText: '再试一次',
barText: '向右滑动填充拼图',
repeatIcon: 'fa fa-repeat'
repeatIcon: 'fa fa-repeat',
maxLoadCount: 3
};
function Plugin(option) {
@ -28,7 +29,7 @@
var data = $this.data('lgb.SliderCaptcha');
var options = typeof option === 'object' && option;
if (!data && /init|reset/.test(option)) return;
if (!data && /init|reset|verify/.test(option)) return;
if (!data) $this.data('lgb.SliderCaptcha', data = new SliderCaptcha(this, options));
if (typeof option === 'string') data[option]();
});
@ -127,10 +128,11 @@
return Math.round(Math.random() * (end - start) + start);
};
var localImg = function () {
return $.format('../images/Pic{0}.jpg', Math.round(Math.random() * 4));
return '../images/Pic' + Math.round(Math.random() * 4) + '.jpg';
};
var img = new Image();
img.crossOrigin = "Anonymous";
var loadCount = 0;
img.onload = function () {
// 随机创建滑块的位置
that.x = getRandomNumberByRange(L + 10, that.options.width - (L + 10));
@ -147,12 +149,23 @@
that.text.text(that.text.attr('data-text'));
};
img.onerror = function () {
loadCount++;
if (window.location.protocol === 'file:') {
loadCount = that.options.maxLoadCount;
console.error("can't load pic resource file from File protocal. Please try http or https");
}
if (loadCount >= that.options.maxLoadCount) {
that.text.text('加载失败').addClass('text-danger');
return;
}
img.src = localImg();
}
img.setSrc = function () {
var src = '';
loadCount = 0;
that.text.removeClass('text-danger');
if ($.isFunction(that.options.setSrc)) src = that.options.setSrc();
if(!src || src === '') src = 'https://picsum.photos/' + that.options.width + '/' + that.options.height + '/?image=' + Math.round(Math.random() * 20);
if (!src || src === '') src = 'https://picsum.photos/' + that.options.width + '/' + that.options.height + '/?image=' + Math.round(Math.random() * 20);
if (isIE) { // IE浏览器无法通过img.crossOrigin跨域使用ajax获取图片blob然后转为dataURL显示
var xhr = new XMLHttpRequest()
xhr.onloadend = function (e) {
@ -188,13 +201,14 @@
$(this.refreshIcon).on('click', function () {
that.text.text(that.options.barText);
that.reset();
if ($.isFunction(that.options.onRefresh)) that.options.onRefresh.call(that);
if ($.isFunction(that.options.onRefresh)) that.options.onRefresh.call(that.$element);
});
var originX, originY, trail = [],
isMouseDown = false
var handleDragStart = function (e) {
if (that.text.hasClass('text-danger')) return;
originX = e.clientX || e.touches[0].clientX;
originY = e.clientY || e.touches[0].clientY;
isMouseDown = true;
@ -229,10 +243,10 @@
} = that.verify()
if (spliced && verified) {
that.sliderContainer.addClass('sliderContainer_success');
if ($.isFunction(that.options.onSuccess)) that.options.onSuccess.call(that);
if ($.isFunction(that.options.onSuccess)) that.options.onSuccess.call(that.$element);
} else {
that.sliderContainer.addClass('sliderContainer_fail');
if ($.isFunction(that.options.onFail)) that.options.onFail.call(that);
if ($.isFunction(that.options.onFail)) that.options.onFail.call(that.$element);
setTimeout(() => {
that.text.text(that.options.failedText);
that.reset();

View File

@ -120,12 +120,12 @@ body {
top: 0;
cursor: pointer;
margin: 6px;
color: rgba(255,255,255,.8);
color: rgba(0,0,0,.25);
font-size: 1rem;
z-index: 5;
transition: color .3s linear;
}
.refreshIcon:hover {
color: #fff;
color: #6c757d;
}