사용자 로그인 인터페이스에서는 인증코드가 필요한 경우가 많지만 인증코드를 사용하는 것이 너무 번거로워서 최근에는 슬라이더 인증에 주목하고 있습니다. js를 사용하여 슬라이더 로그인 기능을 구현할 수 있습니다.
먼저 html에 슬라이더 스타일을 작성합니다. 물론 CSS 스타일을 붙여넣을 필요는 없습니다. 기분에 따라 원하는 대로 만들 수 있습니다.
<div class="sliderBox">
<div id="slider" class="slider" style="padding: 0 5px">
</div>
</div>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(失败)
}
});/* 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);js 플러그인은 이미지 슬라이딩 확인 코드 예제 공유를 구현합니다.
위 내용은 Javascript가 슬라이더 로그인 확인을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
