如何用JavaScriptJ封裝拖動驗證滑塊？本文教你

来源:https://www.cnblogs.com/chengxuyuanaa/archive/2020/06/10/13084083.html
-Advertisement-
Play Games

前言 星期六閑著沒事，就想著寫寫原生js玩玩，在網上看了幾個效果後決定做這個效果，並且使用了prototype和eventEmitter封裝成了庫。 最終效果 分析 1.看到這個效果我們首先應該想到和拖動有關的api: onmousedown, onmousemove, onmouseup 其次要支 ...


前言

星期六閑著沒事，就想著寫寫原生js玩玩，在網上看了幾個效果後決定做這個效果，並且使用了prototype和eventEmitter封裝成了庫。

最終效果

 

 

分析

1.看到這個效果我們首先應該想到和拖動有關的api: onmousedown, onmousemove, onmouseup

其次要支持用戶傳入放置這個組件的dom元素和完成的回調事件。
2.除了滑塊驗證，結合多年開發經驗整理出2020最新企業級實戰視頻教程， 包括 Vue3.0/Js/ES6/TS/React/node等，想學的可進裙 519293536 免費獲取，小白勿進哦！

最終如何使用？

我們先來看下使用方式，再來決定我們怎麼編寫這個庫

 

 

具體使用就是這樣的，我們還想用戶能通過import等方式使用，所以我們就要支持esModule的導入方式。

編寫庫的整體初始框架

(function () {
    // =================代碼塊1=========================================
    var root = (typeof self == 'object' && self.self == self && self) ||
        (typeof global == 'object' && global.global == global && global) ||
        this || {}; 
    var util = {
        extend: function (target) {
            for (var i = 1, len = arguments.length; i < len; i++) {
                for (var prop in arguments[i]) {
                    if (arguments[i].hasOwnProperty(prop)) {
                        target[prop] = arguments[i][prop]
                    }
                }
            }
            return target
        },
        isValidListener: function (listener) {
            if (typeof listener === 'function') {
                return true
            } else if (listener && typeof listener === 'object') {
                return util.isValidListener(listener.listener)
            } else {
                return false
            }
        },
        addCSS: function (cssText) {
            var style = document.createElement('style'),  //創建一個style元素
                head = document.head || document.getElementsByTagName('head')[0]; //獲取head元素
            style.type = 'text/css'; //這裡必須顯示設置style元素的type屬性為text/css，否則在ie中不起作用
            if (style.styleSheet) { //IE
                var func = function () {
                    try { //防止IE中stylesheet數量超過限制而發生錯誤
                        style.styleSheet.cssText = cssText;
                    } catch (e) {

                    }
                }
                //如果當前styleSheet還不能用，則放到非同步中則行
                if (style.styleSheet.disabled) {
                    setTimeout(func, 10);
                } else {
                    func();
                }
            } else { //w3c
                //w3c瀏覽器中只要創建文本節點插入到style元素中就行了
                var textNode = document.createTextNode(cssText);
                style.appendChild(textNode);
            }
            head.appendChild(style); //把創建的style元素插入到head中
        },
        indexOf: function (array, item) {
            if (array.indexOf) {
                return array.indexOf(item);
            } else {
                var result = -1;
                for (var i = 0, len = array.length; i < len; i++) {
                    if (array[i] === item) {
                        result = i;
                        break;
                    }
                }
                return result;
            }
        }
    }
    
    function EventEmitter() {
        this._events = {}
    }

    EventEmitter.prototype.on = function (eventName, listener) {
        if (!eventName || !listener) return;
        if (!util.isValidListener(listener)) {
            throw new TypeError('listener must be a function');
        }
        var events = this._events;
        var listeners = events[eventName] = events[eventName] || [];
        var listenerIsWrapped = typeof listener === 'object';
        // 不重覆添加事件
        if (util.indexOf(listeners, listener) === -1) {
            listeners.push(listenerIsWrapped ? listener : {
                listener: listener,
                once: false
            });
        }
        return this;
    };
    EventEmitter.prototype.once = function (eventName, listener) {
        return this.on(eventName, {
            listener: listener,
            once: true
        })
    };
    EventEmitter.prototype.off = function (eventName, listener) {
        var listeners = this._events[eventName];
        if (!listeners) return;
        var index;
        for (var i = 0, len = listeners.length; i < len; i++) {
            if (listeners[i] && listeners[i].listener === listener) {
                index = i;
                break;
            }
        }
        if (typeof index !== 'undefined') {
            listeners.splice(index, 1, null)
        }
        return this;
    };
    EventEmitter.prototype.emit = function (eventName, args) {
        var listeners = this._events[eventName];
        if (!listeners) return;
        for (var i = 0; i < listeners.length; i++) {
            var listener = listeners[i];
            if (listener) {
                listener.listener.apply(this, args || []);
                if (listener.once) {
                    this.off(eventName, listener.listener)
                }
            }
        }
        return this;
    };
    
    // =================代碼塊2=========================================
    function SliderTools(options) {
        this.options = util.extend({}, this.constructor.defaultOptions, options)
        this.init();
        this.bindEvents();
        this.diffX = 0;
        this.flag = false;//是否拖動到最右側
    }

    SliderTools.defaultOptions = {
        el: document.body //預設放到body里
    };
    
    var proto = SliderTools.prototype = new EventEmitter();//SliderTools繼承emitter
    
    proto.constructor = SliderTools;//修正構造器

    proto.init = function () {
        this.createSlider();//創建插件所需要的dom元素
        this.getElements();//獲取創建好的元素
    }
    
   // =================代碼塊3=========================================
    if (typeof exports != 'undefined' && !exports.nodeType) {
        if (typeof module != 'undefined' && !module.nodeType && module.exports) {
            exports = module.exports = SliderTools;
        }
        exports.SliderTools = SliderTools;
    } else {
        root.SliderTools = SliderTools;
    }
}());
複製代碼

代碼塊1是在判斷是在瀏覽器環境還是nodeJS環境，方便代碼三後期使用， 代碼塊2聲明瞭一個對象SliderTools,將用戶傳進來的option和預設的defaultOption進行合併

編寫核心函數1(創建dom和css)

proto.createSlider = function () {
    this.options.el.innerHTML = '<div id="slider"><div class="drag_bg"></div><div class="drag_text" onselectstart="return false;" unselectable="on">拖動滑塊驗證</div><div class="handler handler_bg"></div></div>';//像指定元素中放置插件的dom元素
    util.addCSS('ul,li {list-style: none;} a {text-decoration: none;} .wrap {width: 300px;height: 350px;text-align: center;margin: 150px auto;}.inner {padding: 15px;} .clearfix {overflow: hidden;_zoom: 1;} .none {display: none;} #slider {position:relative;width: 300px;height: 34px;line-height: 34px;text-align: center;} #slider .handler {position: absolute;top: 0px;left: 0px;width: 40px;height: 32px;border: 1px solid #ccc;cursor: move;}    .handler_bg {background: #fff  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;} .handler_ok_bg {background: #fff    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==")    no-repeat center;}#slider .drag_bg {background-color: #7ac23c;    height: 34px;width: 0px;} #slider .drag_text {position: absolute;    top: 0px;width: 300px;-moz-user-select: none;-webkit-user-select: none;user-select: none;-o-user-select: none;-ms-user-select: none;    }.unselect {-moz-user-select: none;-webkit-user-select: none;    -ms-user-select: none;}.slide_ok {color: #fff;}')//像頁面里add新的樣式
}
proto.getElements = function () {
    this.slider = document.querySelector('#slider');
    this.drag_bg = document.querySelector('.drag_bg');
    this.handler = document.querySelector('.handler');
}
複製代碼

編寫核心函數2(綁定事件)

proto.bindEvents = function () {
    var self = this;
    self.handler.onmousedown = function (e) {
        self.diffX = e.clientX - self.handler.offsetLeft;
        util.setClassName(self.slider, 'unselect'); //禁止選擇樣式
        document.onmousemove = function (e) {
            let deltaX = e.clientX - self.diffX;
            if (deltaX >= self.slider.offsetWidth - self.handler.offsetWidth) { //拖動到了最右側
                deltaX = self.slider.offsetWidth - self.handler.offsetWidth;
                self.flag = true;
            } else if (deltaX <= 0) {
                deltaX = 0;
                self.flag = false;
            } else {
                self.flag = false;
            }
            util.setInlineStyle([self.handler], 'left', deltaX + 'px');
            util.setInlineStyle([self.drag_bg], 'width', deltaX + 'px');
        }
        document.onmouseup = function (e) {
            util.setClassName(self.slider, '')
            if (self.flag) {
                util.setClassName(self.slider, 'slide_ok') //拖動完成後的樣式
                util.addClass(self.handler, 'handler_ok_bg')////拖動完成後的樣式
                self.handler.onmousedown = null //防止拖動完成後再次拖動
                self.emit('complete')//emit通知使用者的回調事件
            } else {
                util.setInlineStyle([self.handler], 'left', 0 + 'px');
                util.setInlineStyle([self.drag_bg], 'width', 0 + 'px');
            }
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
}
複製代碼

添加工具方法(核心函數2中用到的)

var util = {
    // ...初始框架里的那部分
    setClassName(selector, className) {
        selector.className = className;
    },
    addClass(selector, className) {
        selector.classList.add(className);
    },
    setInlineStyle(selector, attr, content) {
        let length = selector.length;
        for (let i = 0; i < length; i++) {
            selector[i].style[attr] = content;
        }
    },
}
複製代碼

最終完整可運行代碼

(function () {
    var root = (typeof self == 'object' && self.self == self && self) ||
        (typeof global == 'object' && global.global == global && global) ||
        this || {};
    var util = {
        extend: function (target) {
            for (var i = 1, len = arguments.length; i < len; i++) {
                for (var prop in arguments[i]) {
                    if (arguments[i].hasOwnProperty(prop)) {
                        target[prop] = arguments[i][prop]
                    }
                }
            }
            return target
        },
        setClassName(selector, className) {
            selector.className = className;
        },
        addClass(selector, className) {
            selector.classList.add(className);
        },
        setInlineStyle(selector, attr, content) {
            let length = selector.length;
            for (let i = 0; i < length; i++) {
                selector[i].style[attr] = content;
            }
        },
        isValidListener: function (listener) {
            if (typeof listener === 'function') {
                return true
            } else if (listener && typeof listener === 'object') {
                return util.isValidListener(listener.listener)
            } else {
                return false
            }
        },
        addCSS: function (cssText) {
            var style = document.createElement('style'),  //創建一個style元素
                head = document.head || document.getElementsByTagName('head')[0]; //獲取head元素
            style.type = 'text/css'; //這裡必須顯示設置style元素的type屬性為text/css，否則在ie中不起作用
            if (style.styleSheet) { //IE
                var func = function () {
                    try { //防止IE中stylesheet數量超過限制而發生錯誤
                        style.styleSheet.cssText = cssText;
                    } catch (e) {

                    }
                }
                //如果當前styleSheet還不能用，則放到非同步中則行
                if (style.styleSheet.disabled) {
                    setTimeout(func, 10);
                } else {
                    func();
                }
            } else { //w3c
                //w3c瀏覽器中只要創建文本節點插入到style元素中就行了
                var textNode = document.createTextNode(cssText);
                style.appendChild(textNode);
            }
            head.appendChild(style); //把創建的style元素插入到head中
        },
        indexOf: function (array, item) {
            if (array.indexOf) {
                return array.indexOf(item);
            } else {
                var result = -1;
                for (var i = 0, len = array.length; i < len; i++) {
                    if (array[i] === item) {
                        result = i;
                        break;
                    }
                }
                return result;
            }
        }
    }

    function EventEmitter() {
        this._events = {}
    }

    EventEmitter.prototype.on = function (eventName, listener) {
        if (!eventName || !listener) return;

        if (!util.isValidListener(listener)) {
            throw new TypeError('listener must be a function');
        }

        var events = this._events;
        var listeners = events[eventName] = events[eventName] || [];
        var listenerIsWrapped = typeof listener === 'object';

        // 不重覆添加事件
        if (util.indexOf(listeners, listener) === -1) {
            listeners.push(listenerIsWrapped ? listener : {
                listener: listener,
                once: false
            });
        }

        return this;
    };
    EventEmitter.prototype.once = function (eventName, listener) {
        return this.on(eventName, {
            listener: listener,
            once: true
        })
    };
    EventEmitter.prototype.off = function (eventName, listener) {
        var listeners = this._events[eventName];
        if (!listeners) return;

        var index;
        for (var i = 0, len = listeners.length; i < len; i++) {
            if (listeners[i] && listeners[i].listener === listener) {
                index = i;
                break;
            }
        }

        if (typeof index !== 'undefined') {
            listeners.splice(index, 1, null)
        }

        return this;
    };
    EventEmitter.prototype.emit = function (eventName, args) {
        var listeners = this._events[eventName];
        if (!listeners) return;

        for (var i = 0; i < listeners.length; i++) {
            var listener = listeners[i];
            if (listener) {
                listener.listener.apply(this, args || []);
                if (listener.once) {
                    this.off(eventName, listener.listener)
                }
            }
        }
        return this;
    };

    function SliderTools(options) {
        this.options = util.extend({}, this.constructor.defaultOptions, options)
        this.init();
        this.bindEvents();
        this.diffX = 0;
        this.flag = false;
    }

    SliderTools.VERSION = '1.0.0';

    SliderTools.defaultOptions = {
        el: document.body
    };

    var proto = SliderTools.prototype = new EventEmitter();

    proto.constructor = SliderTools;

    proto.init = function () {
        this.createSlider();
        this.getElements();
    }

    proto.createSlider = function () {
        this.options.el.innerHTML = '<div id="slider"><div class="drag_bg"></div><div class="drag_text" onselectstart="return false;" unselectable="on">拖動滑塊驗證</div><div class="handler handler_bg"></div></div>';
        util.addCSS('ul, li {    list-style: none;    }    a {    text-decoration: none;    }    .wrap {    width: 300px;    height: 350px;    text-align: center;    margin: 150px auto;    }    .inner {    padding: 15px;    }    .clearfix {    overflow: hidden;    _zoom: 1;    }    .none {    display: none;    }    #slider {    position: relative;        width: 300px;    height: 34px;    line-height: 34px;    text-align: center;    }    #slider .handler {    position: absolute;    top: 0px;    left: 0px;    width: 40px;    height: 32px;    border: 1px solid #ccc;    cursor: move;}    .handler_bg {    background: #fff    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==")    no-repeat center;    }    .handler_ok_bg {    background: #fff    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==")    no-repeat center;    }    #slider .drag_bg {    background-color: #7ac23c;    height: 34px;    width: 0px;       }    #slider .drag_text {    position: absolute;    top: 0px;    width: 300px;    -moz-user-select: none;    -webkit-user-select: none;    user-select: none;    -o-user-select: none;    -ms-user-select: none;    }    .unselect {    -moz-user-select: none;    -webkit-user-select: none;    -ms-user-select: none;    }    .slide_ok {    color: #fff;    }')
    }
    proto.getElements = function () {
        this.slider = document.querySelector('#slider');
        this.drag_bg = document.querySelector('.drag_bg');
        this.handler = document.querySelector('.handler');
    }
    proto.bindEvents = function () {
        var self = this;
        self.handler.onmousedown = function (e) {
            self.diffX = e.clientX - self.handler.offsetLeft;
            util.setClassName(self.slider, 'unselect');
            document.onmousemove = function (e) {
                let deltaX = e.clientX - self.diffX;
                if (deltaX >= self.slider.offsetWidth - self.handler.offsetWidth) {
                    deltaX = self.slider.offsetWidth - self.handler.offsetWidth;
                    self.flag = true;
                } else if (deltaX <= 0) {
                    deltaX = 0;
                    self.flag = false;
                } else {
                    self.flag = false;
                }
                util.setInlineStyle([self.handler], 'left', deltaX + 'px');
                util.setInlineStyle([self.drag_bg], 'width', deltaX + 'px');
            }
            document.onmouseup = function (e) {
                util.setClassName(self.slider, '')
                if (self.flag) {
                    util.setClassName(self.slider, 'slide_ok')
                    util.addClass(self.handler, 'handler_ok_bg')
                    self.handler.onmousedown = null
                    self.emit('complete')
                } else {
                    util.setInlineStyle([self.handler], 'left', 0 + 'px');
                    util.setInlineStyle([self.drag_bg], 'width', 0 + 'px');
                }
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    }
    if (typeof exports != 'undefined' && !exports.nodeType) {
        if (typeof module != 'undefined' && !module.nodeType && module.exports) {
            exports = module.exports = SliderTools;
        }
        exports.SliderTools = SliderTools;
    } else {
        root.SliderTools = SliderTools;
    }
}());

let slider = new SliderTools();
slider.on('complete',() => {
    alert('驗證完成');
})
複製代碼

使用

<script src="./SliderTools.js"></script>
複製代碼

或者

import SliderTools from './SliderTools.js'
 

總結.

除了滑塊驗證，結合多年開發經驗整理出2020最新企業級實戰視頻教程， 包括 Vue3.0/Js/ES6/TS/React/node等，想學的可進裙 519293536 免費獲取，小白勿進哦！

本文的文字及圖片來源於網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 實現微前端需要瞭解的 Vue Genesis 渲染器
    我們的需求 在 中，核心的就是渲染器，它提供了最基礎渲染能力，有了它，你可以實現微前端、微服務、遠程組件、首屏渲染，甚至可以和 React、EJS 等配合使用。 它可以和怎樣的你協作？ 如果你是傳統的後端渲染的，需要做SEO，但是你希望在部分佈局，部分頁面引入 Vue，那麼 renderer.ren ...
  • vue 中vuex的最簡單使用
    首先我們要知道什麼是vuex，請看官方的解釋： “Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零 ...
  • 前端新人關註的Web前端飽和性分析？前端面試必知必會的十點！
    現在前端市場是不是已經飽和了？巴巴巴巴巴...... 還有：XXX行業是否已經飽和？ angular1.5是不是已經被淘汰？ 前端還有前途嗎？ bootstrap為什麼被稱為垃圾框架？等等等 不是博主不友好，只想說一句：飽和的不是市場，飽和的是那曾經不知天高地厚的心。 另一方面，眾所周知，語言都是相 ...
  • 發家致富的鬼bug。讓人心動
    這個bug是我目前見過最離譜的bug…… 顛覆了我二十多年的世界觀，天上掉餡餅這種好事第一次砸我身上（霧），至今我都沒想明白其中的原理。 情況是這樣的，去年我出門去外地有些事情要處理。由於要呆很長時間，所以就找了個地方長期安定了下來。 衣住行解決了，接下來就是吃飯方面的事了，所以我就打開“e了麽”定 ...
  • JS 設計模式 （待整理）
    面試敲門磚、進階墊腳石、設計有模式、代碼更合理Javascript 設計模式系統講解與應用 （練習代碼）第2章 面向對象2-1 搭建開發環境2-2 什麼是面向對象2-3 面向對象-繼承2-4 面向對象-封裝2-5 面向對象-多態2-6 面向對象-應用舉例2-7 面向對象-總結2-8 UML類圖1-介... ...
  • 2020最新中級web前端面試題庫（含詳細答案，15k級別）你會幾道呢？
    前言 1.本篇文章，獻給我家女朋友，祝她在杭州找一個965的好公司！2.除了面試題。結合多年開發經驗整理出2020最新企業級實戰視頻教程， 包括 Vue3.0/Js/ES6/TS/React/node等想學的可進裙 519293536 免費獲取，小白勿進哦！ 題外話：關於中級 -> 高級的進階，我也 ...
  • 轉行Web前端工程師要掌握的學習知識彙總
    今天小編要跟大家分享的文章是關於轉行web前端要掌握的學習知識彙總。下麵小編要跟大家談談Web和前端開發過程中需要學習什麼?前端開發需要使用什麼開發工具?也簡單介紹前端開發前景和薪水。下麵來和小編一起看一看吧！ 一、前端工程師的主要職責： 前端工程師在不同的公司有不同的功能，但性質相似。 1、網站設 ...
  • JavaScript中的這些騷操作，80%的人都不知道
    引言 🏂 1.寫這篇文章的緣由是上周在公司前端團隊的code review時，看了一個實習小哥哥的代碼後，感覺一些剛入行不久的同學，對於真實項目中的一些js處理不是很熟練，缺乏一些技巧。 2.因此整理了自己開發中常用的一些js技巧，靈活的運用，會增強你解決問題的能力，也會對你的代碼簡潔性有很大的改 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類