jquery实现滑块验证功能

jquery利用sliderVerif插件实现滑块验证功能，下面web建站小编给大家简单介绍一下！

1、定义一个div

<div class="box" id="box"></div>
<button onclick="boxRe()">重置</button>

2、sliderVerif.js插件

(function (win) {
  "use strict";
  var _this = null;
  // 内部方法 insertEleStr：插入对象   options:参数
  var sliderVerification = function (insertEleStr = "", options = {}) {
    if (!insertEleStr) throw "insertEleStr 无效，请填写插入父级类名或ID";

    _this = this;

    // 参数
    this.options = {
      sliderText: "请按住滑块拖动",// 滑块提示文字
      succText: "验证通过",// 滑块完成提示文字
      sliderTextColor: "#666",//滑块提示文字颜色  颜色名称，RGB,RGBA,16进制
      succTextColor: "#fff",//滑块完成提示文字颜色  颜色名称，RGB,RGBA,16进制
      fontSize: 1,//字体大小  数字/字符串 字符串可以带单位 ，数字默认单位 em


      /**
       * 盒子 样式
       */
      boxStyle: {
        bg: "#e5e5e5",//背景颜色  颜色名称，RGB,RGBA,16进制
        barBg: "#5abc3c",// 进度条 背景颜色   颜色名称，RGB,RGBA,16进制
        radius: 0,//按钮圆角   数字/字符串  字符串可以带单位，同 border-radius
        borderWidth: 0,//边框宽度  数字/字符串 字符串可以带单位
        borderColor: "#333",//边框颜色  颜色名称，RGB,RGBA,16进制
        borderStyle: "solid",//边框样式   同 css border-style 属性值
      },
      /**
       * 按钮 样式
       */
      btnStyle: {
        color: "#333",// 按钮 图标颜色   颜色名称，RGB,RGBA,16进制
        succColor: "#5abc3c",//滑动完成 图标颜色  颜色名称，RGB,RGBA,16进制
        bg: "#fff",//按钮背景颜色  颜色名称，RGB,RGBA,16进制
        succBg: "#fff",//滑动完成 背景颜色  颜色名称，RGB,RGBA,16进制
        radius: null,//按钮圆角   数字/字符串  字符串可以带单位，同 border-radius，不是数字和字符串，使用 boxStyle.radius
        borderWidth: 1,//边框宽度  数字/字符串 字符串可以带单位
        borderColor: "#e5e5e5",//边框颜色   颜色名称，RGB,RGBA,16进制
        borderStyle: "solid",//边框样式   同 css border-style 属性值
      },
      // 是否监听屏幕变化，自动修改响应式样式
      isResizeAutoStyle: false,
      //返回状态方法
      getCompleteState: (res) => { },
      ...options
    };

    // 内置变量
    this.isComplete = false;//是否完成
    this.step = 15;//步长，回到原点的速度

    // 滑块整体对象
    this._slider_verif_ = null;
    // 滑块
    this._slider_bar = null;
    // 塞入位置的父级元素
    this.insertEle = document.querySelector(insertEleStr);
    // 初始化
    this.init();


    // 监听屏幕变化
    this.resizeTimer = null;
    if (this.options.isResizeAutoStyle) {
      win.addEventListener("resize", () => {
        clearTimeout(this.resizeTimer);
        this.resizeTimer = setTimeout(() => {
          this.upStyle();
        }, 100)
      })
    };
  };
  // 原型链  
  sliderVerification.prototype = {
    // 初始化
    init() {
      // 创建 html
      this.create();
      // 创建css
      this.createCss();
      // 添加事件
      this.addEvent();
    },
    // 创建 html
    create() {

      // 创建元素
      var _slider_verif_ = document.createElement("div");
      _slider_verif_.className = "_slider_verif_";
      _slider_verif_.innerHTML = `
        <span>${this.options.sliderText}</span>
        <div class="_slider_bar">
          <div class="_slider_span">
            <span>${this.options.sliderText}</span>
          </div>
          <p class="_slider_btn"></p>
        </div>
      `;

      // 塞入
      this.insertEle.appendChild(_slider_verif_);
      // 保存 对象
      this._slider_verif_ = _slider_verif_;
      this._slider_bar = _slider_verif_.querySelector("._slider_bar");
    },
    // 创建css
    createCss() {
      // 获取 父级 高宽
      var insertEleStrW = this.insertEle.clientWidth;
      var insertEleStrH = this.insertEle.clientHeight;

      // 设置 盒子 样式
      var boxStyle = JSON.parse(JSON.stringify(this.options.boxStyle || {}));
      // 判断圆角，设置单位
      boxStyle.radius = typeof boxStyle.radius == 'number' ? boxStyle.radius += 'px' : boxStyle.radius;
      // 判断边框宽度，设置单位
      boxStyle.borderWidth = typeof boxStyle.borderWidth == 'number' ? boxStyle.borderWidth += 'px' : boxStyle.borderWidth;


      // 设置 按钮 样式
      var btnStyle = JSON.parse(JSON.stringify(this.options.btnStyle || {}));
      // 判断边框宽度，设置单位
      btnStyle.borderWidth = typeof btnStyle.borderWidth == 'number' ? btnStyle.borderWidth += 'px' : btnStyle.borderWidth;
      // 判断 圆角 ，设置单位
      switch (typeof btnStyle.radius) {
        case 'number':// 数字  ,添加单位
          btnStyle.radius += 'px';
          break;
        case 'string': // 字符串，不需要动
          btnStyle.radius = btnStyle.radius;
          break;
        default: // unll undefined , 没有设置，就是用 盒子 boxStyle.radius 属性
          btnStyle.radius = boxStyle.radius;
          break;
      };


      // 设置字体
      var fontSize = this.options.fontSize;
      typeof fontSize == 'number' ? fontSize += 'em' : fontSize;


      var css = `
        ._slider_verif_ {
          /* 盒子宽度，设置bar>span宽度 */
          --slider_verif_wid: ${insertEleStrW || 0}px;
          /* 盒子高度，设置按钮高度 */
          --slider_verif_hei: ${insertEleStrH || 0}px;
          /* 滑动前 文字颜色 */
          --slider_text_color: ${this.options.sliderTextColor};
          /* 滑动完成 文字颜色 */
          --slider_succ_text_color: ${this.options.succTextColor};
          /* 字体大小 */
          --slider_fontsize:${fontSize};
          
          /* 盒子 样式 */
          --slider_verif_bg:${boxStyle.bg};
          --slider_verif_barbg:${boxStyle.barBg};
          --slider_verif_radius: ${boxStyle.radius};
          --slider_verif_border_w:${boxStyle.borderWidth};
          --slider_verif_border_c:${boxStyle.borderColor};
          --slider_verif_border_s:${boxStyle.borderStyle};


          /* 按钮 样式 */
          --slider_btn_color:${btnStyle.color};
          --slider_btn_succColor:${btnStyle.succColor};
          --slider_btn_bg:${btnStyle.bg};
          --slider_btn_succBg:${btnStyle.succBg};
          --slider_btn_radius: ${btnStyle.radius};
          --slider_btn_border_w:${btnStyle.borderWidth};
          --slider_btn_border_c:${btnStyle.borderColor};
          --slider_btn_border_s:${btnStyle.borderStyle};
        }
        

        @font-face {
          font-family: "iconfont";
          src: '';
        }

        ._slider_verif_ *{
          margin: 0;
          padding: 0;
        }
        ._slider_verif_{
          width: 100%;
          height: 100%;
          position: relative;
          box-sizing: border-box;
          overflow: hidden;
          user-select: none;
          background-color: #fff;
          font-size: 14px;
          border: 1px solid #333;
          color: #666;
          border-radius: var(--slider_verif_radius);
          border-width: var(--slider_verif_border_w);
          border-style: var(--slider_verif_border_s);
          border-color: var(--slider_verif_border_c);
          background-color: var(--slider_verif_bg);
          color:var(--slider_text_color);
        }
        ._slider_verif_ span{
          width: 100%;
          height: 100%;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 1em;
          font-size: var(--slider_fontsize);
        }
        ._slider_verif_ ._slider_bar{
          position: absolute;
          z-index: 5;
          width: 0;
          min-width:var(--slider_verif_hei);
          height: 100%;
          top: 0;
          left: 0;
          overflow: hidden;
          color: #fff;
          background-color:#5abc3c;
          color:var(--slider_succ_text_color);
          border-radius: var(--slider_btn_radius);
          background-color:var(--slider_verif_barbg);
        }
        ._slider_bar ._slider_span{
          width: var(--slider_verif_wid);
          height: 100%;
          position: relative;
        }
        ._slider_btn{
          position: absolute;
          z-index: 3;
          top: 0;
          right: 0;
          width: var(--slider_verif_hei);
          height: 100%;
          cursor: pointer;
          border: 1px solid #e5e5e5;
          box-sizing: border-box;
          color: #666;
          font-size: 1.5em;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: "iconfont";
          background-color: #fff;
          background-color: var(--slider_btn_bg);
          border-radius: var(--slider_btn_radius);
          border-width: var(--slider_btn_border_w);
          border-style: var(--slider_btn_border_s);
          border-color: var(--slider_btn_border_c);
        }
        ._slider_btn::before{
          content: "\\e6b5";
          color:var(--slider_btn_color);
        }
        /* 完成样式 */
        ._slider_verif_._slider_verif_complete ._slider_btn{
          background-color: var(--slider_btn_succBg);
        }
        ._slider_verif_._slider_verif_complete ._slider_btn::before{
          content: "\\e600";
          color:var(--slider_btn_succColor);
        }
      `;


      var style = document.createElement('style');
      style.type = 'text/css';
      style.id = "_slider_verif_";
      if (style.styleSheet) {
        style.styleSheet.cssText = css;
      } else {
        style.appendChild(document.createTextNode(css));
      }
      document.head.appendChild(style);
    },
    // 添加 事件
    addEvent() {
      var _slider_btn = this._slider_verif_.querySelector("._slider_btn");
      // pc，拖动事件
      _slider_btn.addEventListener("mousedown", this.btnMousedown);
      // 移动，触摸 拖动事件
      _slider_btn.addEventListener("touchstart", this.btnTouchstart);
    },
    // 按钮按下事件,鼠标
    btnMousedown(e) {
      e.preventDefault();
      // 判断是否完成
      if (_this.isComplete) return;
      var insertEleStrW = _this.insertEle.clientWidth;
      // 点击位置
      var clientX = e.clientX;


      // 拖动
      document.onmousemove = (e) => {
        // 移动距离
        var move = e.clientX - clientX;

        // 判断 移动距离是否达到 最大
        if (move >= insertEleStrW) {
          move = insertEleStrW;
        };
        // 设置样式
        _this._slider_bar.style.width = move + "px";
        // 判断 是否完成
        if (move >= insertEleStrW) {
          _this.slideComplete();
          btnUp();
        };
      };
      // 松开鼠标
      document.onmouseup = (e) => {
        btnUp();
      };

      var btnUp = () => {
        document.onmousemove = null;
        document.onmouseup = null;
        // 判断是否未完成
        if (!_this.isComplete) {
          // 回到原点
          _this.backOrigin(_this.step);
        };
        btnUp = null;
      };
    },
    // 按钮按下事件，触摸
    btnTouchstart(e) {
      e.preventDefault();
      // 判断是否完成
      if (_this.isComplete) return;
      var insertEleStrW = _this.insertEle.clientWidth;
      // 点击位置
      var clientX = e.touches[0].clientX;

      // 拖动
      document.ontouchmove = (e) => {
        // 移动距离
        var move = e.touches[0].clientX - clientX;

        // 判断 移动距离是否达到 最大
        if (move >= insertEleStrW) {
          move = insertEleStrW;
        };
        // 设置样式
        _this._slider_bar.style.width = move + "px";
        // 判断 是否完成
        if (move >= insertEleStrW) {
          _this.slideComplete();
          btnUp();
        };
      };
      // 松开鼠标
      document.ontouchend = (e) => {
        btnUp();
      };

      var btnUp = () => {
        document.ontouchmove = null;
        document.ontouchend = null;
        // 判断是否未完成
        if (!_this.isComplete) {
          // 回到原点
          _this.backOrigin(_this.step);
        };
        btnUp = null;
      };
    },
    // 回到原点 
    backOrigin(step) {
      var wid = this._slider_bar.clientWidth;//宽度
      var btn_w = this._slider_verif_.querySelector("._slider_btn").offsetWidth;

      wid = wid - step;

      // 最小位置是 在 按钮宽度位置
      if (wid - btn_w <= 0) wid = 0;


      this._slider_bar.style.width = wid + 'px';

      if (wid <= 0) {
        // 可以继续滑动
        this.isComplete = false;
      } else {
        step--;
        if (step <= 8) step = 8;
        setTimeout(() => {
          this.backOrigin(step);
        }, 2);
      };
    },
    // 滑动完成
    slideComplete() {
      this.isComplete = true;
      // 添加完成类
      this._slider_verif_.classList.add("_slider_verif_complete");
      // 修改 提示文字
      this.modifyUpText(this.options.succText);
      // 返回完成状态
      this.options.getCompleteState(true);
    },
    // 修改 上层提示文案
    modifyUpText(text) {
      var span = this._slider_bar.querySelector("._slider_span").querySelector("span");
      span.innerText = text;
    },
    // 销毁
    destroy() {
      this._slider_verif_.remove();
      clearTimeout(this.resizeTimer);
    },
    // 重置
    reset() {
      this.modifyUpText(this.options.sliderText);
      this.backOrigin(this.step);
      // 移除完成类
      this._slider_verif_.classList.remove("_slider_verif_complete");
    },
    // 更新样式(屏幕变化)
    upStyle() {
      // 获取 父级 高宽
      var insertEleStrW = this.insertEle.clientWidth;
      var insertEleStrH = this.insertEle.clientHeight;
      console.log(insertEleStrW, insertEleStrH);
      // 只需要更新 的 css变量
      this._slider_verif_.style.setProperty("--slider_verif_wid", insertEleStrW + 'px');
      this._slider_verif_.style.setProperty("--slider_verif_hei", insertEleStrH + 'px');
    },
  };

  // 外部方法,单列模式
  var sliderVerif = null;
  var sliderVerifFunc = function (insertEleStr = "", options = {}) {
    if (sliderVerif) sliderVerif.destroy();
    sliderVerif = new sliderVerification(insertEleStr, options);
  };
  // 重置
  sliderVerifFunc.prototype.reset = function () {
    sliderVerif.reset();
  };
  // 更新样式
  sliderVerifFunc.prototype.upStyle = function () {
    sliderVerif.upStyle();
  };

  win.sliderVerif = sliderVerifFunc;
})(this);

3、页面调用：

var box = new sliderVerif("#box", {
  sliderText: "请按住滑块拖动",// 滑块提示文字
  succText: "验证通过",// 滑块完成提示文字
  sliderTextColor: "#666",//滑块提示文字颜色
  succTextColor: "#fff",//滑块完成提示文字颜色
  fontSize: 1,//字体大小  数字/字符串 字符串可以带单位 ，数字默认单位 em
  
  /**
   * 盒子 样式
   */
  boxStyle: {
    bg: "#e5e5e5",//背景颜色  颜色名称，RGB,RGBA,16进制
    barBg: "#5abc3c",// 进度条 背景颜色   颜色名称，RGB,RGBA,16进制
    radius: 0,//按钮圆角   数字/字符串  字符串可以带单位，同 border-radius
    borderWidth: 0,//边框宽度  数字/字符串 字符串可以带单位
    borderColor: "#333",//边框颜色  颜色名称，RGB,RGBA,16进制
    borderStyle: "solid",//边框样式   同 css border-style 属性值
  },
  /**
   * 按钮 样式
   */
  btnStyle: {
    color: "#333",// 按钮 图标颜色   颜色名称，RGB,RGBA,16进制
    succColor: "#5abc3c",//滑动完成 图标颜色    颜色名称，RGB,RGBA,16进制
    bg: "#fff",//按钮背景颜色    颜色名称，RGB,RGBA,16进制
    succBg: "#fff",//滑动完成 背景颜色    颜色名称，RGB,RGBA,16进制
    radius: null,//按钮圆角   数字/字符串  字符串可以带单位，同 border-radius，不是数字和字符串，使用 boxStyle.radius
    borderWidth: 1,//边框宽度  数字/字符串 字符串可以带单位
    borderColor: "#e5e5e5",//边框颜色   颜色名称，RGB,RGBA,16进制
    borderStyle: "solid",//边框样式   同 css border-style 属性值
  },
  // 是否监听屏幕变化，自动修改响应式样式
  isResizeAutoStyle: false,
  //返回状态方法
  getCompleteState: (res) => {
    console.log(res);
  },
});

function boxRe() {
  box.reset();
}

当前插件不兼容IE浏览器~