首页 > 代码库 > 滑动验证码

滑动验证码

自己研究: jQuery拖拽滑动验证码插件 slideunlock.js

 

原理:(别人说)

响应时间,拖拽速度,时间,位置,轨迹,重试次数等。
这些因素能够构成一个采样结果或者辨识特性。

 

只获取到滑动时间,滑动的长度。

 

效果:

技术分享

技术分享

 

 

 

html页面

 

<link href="http://www.mamicode.com/css/slide-unlock.css" rel="stylesheet">
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-2.0.2.min.js"></script>

<div id="slider">

<divid="slider_bg"></div>

<spanid="label">>></span> <spanid="labelTip">拖动滑块验证</span>

</div>

<script>

var startTime =0;

    varendTime = 0;

    varnumTime = 0;

    $(function() {

             var slider = newSliderUnlock("#slider",{

                successLabelTip : "欢迎注册"

       },function(){

var  sli_width =$("#slider_bg").width();

           alert("验证成功");

           endTime = nowTime();

           numTime = endTime-startTime;

           endTime = 0;

           startTime = 0;

                            //获取到滑动使用的时间滑动的宽度

           alert( numTime );

           alert( sli_width );

});

             slider.init();

})

/**

 * 获取时间精确到毫秒

* @type

 */

function nowTime(){

var myDate = newDate();

var H =myDate.getHours();//获取小时

var M =myDate.getMinutes(); //获取分钟

var S =myDate.getSeconds();//获取秒

var MS =myDate.getMilliseconds();//获取毫秒

var milliSeconds= H * 3600 * 1000 + M * 60 * 1000 + S * 1000 + MS;

returnmilliSeconds;

}

</script>

<scriptsrc="http://www.mamicode.com/js/jquery.slideunlock.js"></script>

 

css样式

 


#slider {
margin: 10px 5%;
width: 90%;
height: 40px;
position: relative;
border-radius: 8px;
background-color: #dae2d0;
overflow: hidden;
text-align: center;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}

#slider_bg {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-color: #7AC23C;
z-index: 1;
}

#label {
width: 46px;
position: absolute;
left: 0;
top: 0;
height: 38px;
line-height: 38px;
border: 1px solid #cccccc;
background: #fff;
z-index: 3;
cursor: move;
color: #ff9e77;
font-size: 16px;
font-weight: 900;
}

#labelTip {
position: absolute;
left: 0;
width: 100%;
height: 100%;
font-size: 13px;
font-family: ‘Microsoft Yahei‘, serif;
color: #787878;
line-height: 38px;
text-align: center;
z-index: 2;
}


js效果


/**
* jquery plugin -- jquery.slideunlock.js
* www.sucaijiayuan.com
* created: March 27, 2016
*/

;(function ($,window,document,undefined) {
function SliderUnlock(elm, options, success){
var me = this;
var $elm = me.checkElm(elm) ? $(elm) : $;
success = me.checkFn(success) ? success : function(){};

var opts = {
successLabelTip: "Successfully Verified",
duration: 200,
swipestart: false,
min: 0,
max: $elm.width(),
index: 0,
IsOk: false,
lableIndex: 0
};

opts = $.extend(opts, options||{});

//$elm
me.elm = $elm;
//opts
me.opts = opts;
//是否开始滑动
me.swipestart = opts.swipestart;
//最小值
me.min = opts.min;
//最大值
me.max = opts.max;
//当前滑动条所处的位置
me.index = opts.index;
//是否滑动成功
me.isOk = opts.isOk;
//滑块宽度
me.labelWidth = me.elm.find(‘#label‘).width();
//滑块背景
me.sliderBg = me.elm.find(‘#slider_bg‘);
//鼠标在滑动按钮的位置
me.lableIndex = opts.lableIndex;
//success
me.success = success;
}

SliderUnlock.prototype.init = function () {
var me = this;

me.updateView();
me.elm.find("#label").on("mousedown", function (event) {
var e = event || window.event;
me.lableIndex = e.clientX - this.offsetLeft;
me.handerIn();
}).on("mousemove", function (event) {
me.handerMove(event);
}).on("mouseup", function (event) {
me.handerOut();
}).on("mouseout", function (event) {
me.handerOut();
}).on("touchstart", function (event) {
var e = event || window.event;
me.lableIndex = e.originalEvent.touches[0].pageX - this.offsetLeft;
me.handerIn();
}).on("touchmove", function (event) {
me.handerMove(event, "mobile");
}).on("touchend", function (event) {
me.handerOut();
});
};

/**
* 鼠标/手指接触滑动按钮
*/
SliderUnlock.prototype.handerIn = function () {
var me = this;
me.swipestart = true;

var myDate = new Date();
var H = myDate.getHours();//获取小时
var M = myDate.getMinutes(); //获取分钟
var S = myDate.getSeconds();//获取秒
var MS = myDate.getMilliseconds();//获取毫秒
var milliSeconds = H * 3600 * 1000 + M * 60 * 1000 + S * 1000 + MS;

startTime = milliSeconds;


me.min = 0;
me.max = me.elm.width();
};

/**
* 鼠标/手指移出
*/
SliderUnlock.prototype.handerOut = function () {
var me = this;
//停止
me.swipestart = false;

weizhi = me.labelWidth;

//me.move();
if (me.index < me.max) {
me.reset();
}
};

/**
* 鼠标/手指移动
* @param event
* @param type
*/
SliderUnlock.prototype.handerMove = function (event, type) {
var me = this;
if (me.swipestart) {
event.preventDefault();
event = event || window.event;
if (type == "mobile") {
me.index = event.originalEvent.touches[0].pageX - me.lableIndex;
} else {
me.index = event.clientX - me.lableIndex;
}
me.move();
}
};

/**
* 鼠标/手指移动过程
*/
SliderUnlock.prototype.move = function () {
var me = this;
if ((me.index + me.labelWidth) >= me.max) {
me.index = me.max - me.labelWidth -2;
//停止
me.swipestart = false;
//解锁
me.isOk = true;
}
if (me.index < 0) {
me.index = me.min;
//未解锁
me.isOk = false;
}
if (me.index+me.labelWidth+2 == me.max && me.max > 0 && me.isOk) {
//解锁默认操作
$(‘#label‘).unbind().next(‘#labelTip‘).
text(me.opts.successLabelTip).css({‘color‘: ‘#fff‘});

me.success();
}
me.updateView();
};


/**
* 更新视图
*/
SliderUnlock.prototype.updateView = function () {
var me = this;

me.sliderBg.css(‘width‘, me.index);
me.elm.find("#label").css("left", me.index + "px")
};

/**
* 重置slide的起点
*/
SliderUnlock.prototype.reset = function () {
var me = this;

startTime = 0;

me.index = 0;
me.sliderBg .animate({‘width‘:0},me.opts.duration);
me.elm.find("#label").animate({left: me.index}, me.opts.duration)
.next("#lableTip").animate({opacity: 1}, me.opts.duration);
me.updateView();
};

/**
* 检测元素是否存在
* @param elm
* @returns {boolean}
*/
SliderUnlock.prototype.checkElm = function (elm) {
if($(elm).length > 0){
return true;
}else{
throw "this element does not exist.";
}
};

/**
* 检测传入参数是否是function
* @param fn
* @returns {boolean}
*/
SliderUnlock.prototype.checkFn = function (fn) {
if(typeof fn === "function"){
return true;
}else{
throw "the param is not a function.";
}
};


window[‘SliderUnlock‘] = SliderUnlock;
})(jQuery, window, document);





 

 

两个链接

https://www.zhihu.com/question/32209043/answer/55252171

http://www.zhihu.com/question/35538123

 

滑动验证码