Comment Javascript implémente la vérification de connexion par curseur

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 = &#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);

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!