How Javascript implements slider login verification

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 = &#39;<div class="ui-slider-wrap">&#39; + &#39;<div class="ui-slider-text ui-slider-no-select">&#39; + this.opts.textMsg + "</div>" + &#39;<div class="ui-slider-btn init ui-slider-no-select"></div>&#39; + &#39;<div class="ui-slider-bg"></div>&#39; + "</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)
            })

            $(&#39;.ui-slider-btn&#39;).get(0).addEventListener(&#39;touchstart&#39;,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;
            $(&#39;.ui-slider-btn&#39;).get(0).addEventListener(&#39;touchmove&#39;,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;
            $(&#39;.ui-slider-btn&#39;).get(0).addEventListener(&#39;touchend&#39;,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);
                $(&#39;.ui-slider-btn&#39;).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!