Heim > Web-Frontend > js-Tutorial > Wie Javascript die Slider-Anmeldeüberprüfung implementiert

Wie Javascript die Slider-Anmeldeüberprüfung implementiert

不言
Freigeben: 2018-07-16 17:11:27
Original
3160 Leute haben es durchsucht

In der Benutzeranmeldeoberfläche sind häufig Bestätigungscodes erforderlich, aber die Verwendung von Bestätigungscodes ist zu umständlich, daher habe ich kürzlich auf die Slider-Verifizierung geachtet. Sie können js verwenden, um die Slider-Anmeldefunktion zu implementieren.

Schreiben Sie zuerst den Slider-Stil in den HTML-Code. Natürlich ist es nicht nötig, den CSS-Stil einzufügen, Sie können ihn nach Lust und Laune gestalten

<div class="sliderBox">
     <div id="slider" class="slider" style="padding: 0 5px">                 
     </div>
</div>
Nach dem Login kopieren

Importieren Sie die js-Datei,

$("#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(失败)
        }
    });
Nach dem Login kopieren

Natürlich müssen Sie eine js-Datei einführen, die auf jq basiert, also schreiben Sie sie nach 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);
Nach dem Login kopieren

Fertig!

Verwandte Empfehlungen:

js-Plug-in zur Implementierung der Bild-Sliding-Verifizierungscode-Beispielfreigabe

jquery zur Implementierung der PC-seitigen Sliding-Verifizierung

Das obige ist der detaillierte Inhalt vonWie Javascript die Slider-Anmeldeüberprüfung implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage