Maison > Article > interface Web > Comment Javascript implémente la vérification de connexion par curseur
Comment Javascript implémente la vérification de connexion par curseur
- 不言original
- 2018-07-16 17:11:273097parcourir
Dans l'interface de connexion utilisateur, des codes de vérification sont souvent requis, mais l'utilisation de codes de vérification est trop lourde, j'ai donc récemment prêté attention à la vérification par curseur. Vous pouvez utiliser js pour implémenter la fonction de connexion par curseur.
Écrivez d'abord le style du slider en html. Bien sûr, il n'est pas nécessaire de coller le style CSS. Vous pouvez le faire comme vous le souhaitez selon votre humeur
<div class="sliderBox">
<div id="slider" class="slider" style="padding: 0 5px">
</div>
</div>Écrivez des fichiers js, $("#slider").slider({
width: 400, // width
height: 40, // height
sliderBg: "rgba(230,245,188)", // 滑块背景颜色
color: "black", // 文字颜色
fontSize: 14, // 文字大小
bgColor: "rgba(78,226,153,0.40)", // 背景颜色
textMsg: "请按住滑块，拖动到最右边", // 提示文字
successMsg: "验证通过", // 验证成功提示文字
successColor: "black", // 滑块验证成功提示文字颜色
time: 400, // 返回时间
callback: function(result) {if(result){
//你想干啥
})
}
// 回调函数，true(成功),false(失败)
}
});Bien sûr, vous devez introduire un fichier js, qui est basé sur jq, alors écrivez-les après jq. /* jQuery, window, document */
(function(t, i, s) {
var l = function(i, s) {
this.ele = i;
this.defaults = {
width: 300,
height: 34,
sliderBg: "#e8e8e8",
color: "#666",
fontSize: 12,
bgColor: "#7ac23c",
textMsg: "请按住滑块，拖动到最右边",
successMsg: "验证成功",
successColor: "#fff",
time: 160,
callback: function(t) {}
};
this.opts = t.extend({}, this.defaults, s);
this.init()
};
l.prototype = {
init: function() {
this.result = false;
this.sliderBtn_left = 0;
this.maxLeft = this.opts.width - this.opts.height;
this.render();
this.eventBind()
},
render: function() {
var t = '<div class="ui-slider-wrap">' + '<div class="ui-slider-text ui-slider-no-select">' + this.opts.textMsg + "</div>" + '<div class="ui-slider-btn init ui-slider-no-select"></div>' + '<div class="ui-slider-bg"></div>' + "</div>";
this.ele.html(t);
this.initStatus()
},
initStatus: function() {
var t = this;
var i = this.ele;
this.slider = i.find(".ui-slider-wrap");
this.sliderBtn = i.find(".ui-slider-btn");
this.bgColor = i.find(".ui-slider-bg");
this.sliderText = i.find(".ui-slider-text");
this.slider.css({
width: t.opts.width,
height: t.opts.height,
backgroundColor: t.opts.sliderBg
});
this.sliderBtn.css({
width: t.opts.height,
height: t.opts.height,
lineHeight: t.opts.height + "px"
});
this.bgColor.css({
height: t.opts.height,
backgroundColor: t.opts.bgColor
});
this.sliderText.css({
lineHeight: t.opts.height + "px",
fontSize: t.opts.fontSize,
color: t.opts.color
})
},
restore: function() {
var t = this;
var i = t.opts.time;
this.result = false;
this.initStatus();
this.sliderBtn.removeClass("success").animate({
left: 0
}, i);
this.bgColor.animate({
width: 0
}, i, function() {
t.sliderText.text(t.opts.textMsg)
})
},
eventBind: function() {
var t = this;
this.ele.on("mousedown", ".ui-slider-btn", function(i) {
if(t.result) {
return
}
t.sliderMousedown(i)
})
$('.ui-slider-btn').get(0).addEventListener('touchstart',function(i){
if(t.result) {
return
}
t.slidertouchstart(i)
})
},
slidertouchstart: function(t){
var i = this;
var s = t.touches[0].clientX;
var e = s - this.sliderBtn.offset().left;
i.slidertouchmove(s, e);
i.slidertouchup()
},
slidertouchmove: function(i,e){
var l = this;
$('.ui-slider-btn').get(0).addEventListener('touchmove',function(t){
if(l.result) return;
window.getSelection().removeAllRanges();
l.sliderBtn_left = t.touches[0].clientX - i - e;
if(l.sliderBtn_left < 0) {
return
}
if(l.sliderBtn_left > l.maxLeft) {
l.sliderBtn_left = l.maxLeft
}
l.sliderBtn.css("left", l.sliderBtn_left);
l.bgColor.width(l.sliderBtn_left)
})
},
slidertouchup: function(){
var i = this;
$('.ui-slider-btn').get(0).addEventListener('touchend',function(t){
if(i.sliderBtn_left != i.maxLeft) {
i.sliderBtn_left = 0
} else {
i.ele.find(".ui-slider-text").text(i.opts.successMsg).css({
color: i.opts.successColor
});
i.ele.find(".ui-slider-btn").addClass("success");
i.result = true;
}
i.sliderBtn.animate({
left: i.sliderBtn_left
}, i.opts.time);
i.bgColor.animate({
width: i.sliderBtn_left
}, i.opts.time);
$('.ui-slider-btn').get(0).ontouchmove = null;
if(i.opts.callback && typeof i.opts.callback === "function") {
i.opts.callback(i.result)
}
})
},
sliderMousedown: function(t) {
var i = this;
var s = t.clientX;
var e = s - this.sliderBtn.offset().left;
i.sliderMousemove(s, e);
i.sliderMouseup()
},
sliderMousemove: function(i, e) {
var l = this;
t(s).on("mousemove.slider", function(t) {
window.getSelection().removeAllRanges();
l.sliderBtn_left = t.clientX - i - e;
if(l.sliderBtn_left < 0) {
return
}
if(l.sliderBtn_left > l.maxLeft) {
l.sliderBtn_left = l.maxLeft
}
l.sliderBtn.css("left", l.sliderBtn_left);
l.bgColor.width(l.sliderBtn_left)
})
},
sliderMouseup: function() {
var i = this;
t(s).on("mouseup.slider", function() {
if(i.sliderBtn_left != i.maxLeft) {
i.sliderBtn_left = 0
} else {
i.ele.find(".ui-slider-text").text(i.opts.successMsg).css({
color: i.opts.successColor
});
i.ele.find(".ui-slider-btn").addClass("success");
i.result = true
}
i.sliderBtn.animate({
left: i.sliderBtn_left
}, i.opts.time);
i.bgColor.animate({
width: i.sliderBtn_left
}, i.opts.time);
t(this).off("mousemove.slider mouseup.slider");
if(i.opts.callback && typeof i.opts.callback === "function") {
i.opts.callback(i.result)
}
})
}
};
t.fn.extend({
slider : function(i) {
return this.each(function() {
var s = t(this);
var e = s.data("slider");
if(!e) {
e = new l(s, i);
s.data("slider", e)
}
if(typeof i === "string") {
e[i]()
}
})
}
})
/*t.fn.slider = function(i) {
return this.each(function() {
var s = t(this);
var e = s.data("slider");
if(!e) {
e = new l(s, i);
s.data("slider", e)
}
if(typeof i === "string") {
e[i]()
}
})
}*/
})(jQuery, window, document);Fait ! Recommandations associées :
Plug-in js pour implémenter le partage d'exemples de code de vérification par glissement d'image
jquery pour implémenter la vérification par glissement côté PC
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment transférer des fonctions en jsArticle suivant：Comment transférer des fonctions en js