如何實現拖動認證登錄？

 --- 基於在線資源，也可以本地腳本或者自己搭建阿里雲服務上傳資源腳本。---

一，瀏覽器加載服務器腳本

創建並添加script標簽

var p = document.getElementsByTagName('head').item(0);
var sc = document.createElement('script')
sc.setAttribute('type', 'text/javascript');
sc.onload = sc.onreadystatechange = function () {
  if (sc.readyState == 'loaded' || sc.readyState == 'complete') {
     sc.onload = null;
     sc.onreadystatechange = null;
     sc.parentNode.removeChild(sc);
  }
}
sc.setAttribute('src', 'https://code.jquery.com/jquery-3.4.1.js');
p.appendChild(sc);
// script 資源標簽請求下載完成之后，刪除標簽后資源一直都在~

 

 

二，訪問阿里雲站點，從服務器上獲取可以操作dom實現滑動認證的功能。

// 疑問，1，下載完成后removeChild資源還在嗎，2，寫成迭代的好處是什么
// 下載完成后資源已經在本地緩存中，移除script標簽不會刪除資源
// 迭代的好處是加載的資源路徑可以用一個數組保存

function seriesLoadScripts(scripts,callback) {
    if(typeof(scripts) != "object") var scripts = [scripts];
    const HEAD = document.getElementsByTagName("head").item(0) || document.documentElement;
    const s = new Array(),
          last = scripts.length - 1,
          recursiveLoad = i => {  //遞歸
              s[i] = document.createElement("script");
              s[i].setAttribute("type","text/javascript");
              s[i].onload = s[i].onreadystatechange = function() { //兼容不同瀏覽器，onload Chrome Safari Firefox瀏覽器 ，
                  if(!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") {
                      this.onload = this.onreadystatechange = null; this.parentNode.removeChild(this); 
                      if(i != last) recursiveLoad(i + 1); else if(typeof(callback) == "function") callback();
                  }
              }
              s[i].setAttribute("src",scripts[i]);
              HEAD.appendChild(s[i]);
          };
    recursiveLoad(0);
}

export  const VerrifyCode = (ops) => {
   
    if (browser.versions.mobile) {
        mob(ops);
    }
    else {
        pc(ops);
    }
};

// 下載的資源會立即執行，所以在回調函數中可以調用返回資源中定義的函數
// 執行對應的函數，傳參可以寫在一個option中，包括使用js進行dom操作渲染dom節點，滑動事件滑動操作操作執行好之后的callback等。

export const pc = (option) => {
    
    const __date = new Date(), timestamp = `${__date.getFullYear()}${__date.getMonth()}${__date.getDay()}`;
    seriesLoadScripts('http://g.alicdn.com/sd/ncpc/nc.js?t=${timestamp}', () => {

        const nc_token = ["DZ_PC", (new Date()).getTime(), Math.random().toString(16)].join(':');
       
        const NC_Opt =
            {
                renderTo:option.id,
                appkey: option.appkey || "FFFF0N1N000000006DC1",
                scene: option.scene || "nc_login",
                token: nc_token,
                customWidth:  option.width,
                trans:{"position": "sign-sms"},
                elementID: ["sign-sms"],
                is_Opt: 0,
                language: "cn",
                isEnabled: true,
                timeout: 3000,
                times:5,
                apimap: { },
                callback(data) {
                    if(typeof(option.callback)=="function"){
                        option.callback(data)
                    }
                }
            };
        const nc = new noCaptcha(NC_Opt);
        nc.upLang('cn', {
            _startTEXT: "請按住滑塊，拖動到最右邊",
            _yesTEXT: "驗證通過",
            _error300: "哎呀，出錯了，點擊<a href=\"javascript:__nc.reset()\">刷新</a>再來一次",
            _errorNetwork: "網絡不給力，請<a href=\"javascript:__nc.reset()\">點擊刷新</a>",
        })
    });
};
// 區分移動端兼容問題（樣式、點擊事件、觸摸事件等）
export const mob = (option) => {
    const __date = new Date(), timestamp = `${__date.getFullYear()}${__date.getMonth()}${__date.getDay()}`;
    
    seriesLoadScripts(`//g.alicdn.com/sd/nch5/index.js?t=${timestamp}`, () => {
        const nc_token = ["DZ_H5", (new Date()).getTime(), Math.random().toString(16)].join(':');
        const nc = NoCaptcha.init({
            renderTo:option.id,
            appkey: option.appkey || "FFFF0N1N000000006DC1",
            scene: "nc_login_h5",
            token: nc_token,
            customWidth: option.width,
            trans:{"position": "sign-h5"},
            elementID: ["sign-h5"],
            is_Opt: 0,
            language: "cn",
            timeout: 10000,
            retryTimes: 5,
            errorTimes: 5,
            inline:false,
            apimap: { },
            bannerHidden:false,
            initHidden:false,
            callback(data) {
                if(typeof(option.callback)=="function"){
                    let DATA=data
                    DATA.nc_token=nc_token
                    option.callback(DATA)
                }
                
            },
            error(s) {
            }
        });
        NoCaptcha.setEnabled(true);
        nc.reset();//請務必確保這里調用一次reset()方法
        NoCaptcha.upLang('cn', {
            'LOADING':"加載中...",//加載
            'SLIDER_LABEL': "請向右滑動驗證",//等待滑動
            'CHECK_Y':"驗證通過",//通過
            'CHECK_N':"驗證未通過", //准備喚醒二次驗證
        });

    });

};

// option 結構 { id: "#slide-verify" }
export const codeReset = (option) => {
      VerrifyCode(option)
}