In the user login interface, verification codes are often required, but using verification codes is too cumbersome, so I have recently paid attention to slider verification. You can use js to implement the slider login function.
First write the slider style in the html. Of course, there is no need to paste the css style. Whatever you want to make depends on your mood.
<div class="sliderBox">
<div id="slider" class="slider" style="padding: 0 5px">
</div>
</div>Write Import the js file,
$("#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(失败)
}
});Of course you need to introduce a js file, which is based on jq, so you need to write them after 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);Finished!
Related recommendations:
js plugin implements image sliding verification code example sharing
jquery implements PC side sliding verification
The above is the detailed content of How Javascript implements slider login verification. For more information, please follow other related articles on the PHP Chinese website!
Which inscription is the most promising in the currency circle?
What does edge computing gateway mean?
What are the static code checking tools?
What to do if memory usage is too high
Why webstorm cannot run the file
There are several types of php arrays
What system is qad?
How do I set up WeChat to require my consent when people add me to a group?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
