JavaScript實現(xiàn)登錄滑塊驗證

更新時間：2021年04月14日 08:30:24 作者：梨綰.

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)登錄滑塊驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)登錄滑塊驗證的具體代碼，供大家參考，具體內容如下

html代碼

<div class="login-select">
    <div v-show="errselectFlag" id="err-select"></div>
        <p id="title-p">按住滑塊，拖拽驗證</p>
        <div id="left-select"></div>
        <div id="right-select">
        <i id="icon-dui" class="iconfont icon-right"></i>
    </div>
</div>

javascript代碼

//   滑塊驗證
var oRight = document.getElementById("right-select");
var bg = document.getElementById("left-select");
var title = document.getElementById("title-p");
var i = document.getElementById("icon-dui");
    oRight.onmousedown = function (e) {
      var downX = e.clientX; //按下按鈕后與窗口的x軸間距
      // 鼠標移動事件
      oRight.onmousemove = function (e) {
        if (e.clientX != 240) {
          oRight.style.left = 0 + "px";
          bg.style.left = 0 + "px";
        }
        var moveX = e.clientX - downX; //滑動的時候距離窗口的x軸的間距
        //只有在大于0的時候才拖動,否則會出現(xiàn)反向拖動
        if (moveX > 0) {
          oRight.style.left = moveX + "px"; //滑塊與左邊的距離
          bg.style.width = moveX + "px"; //背景的寬度就是滑塊距離左邊的位置
          if (moveX >= 280 - oRight.offsetWidth) {
            i.className = "iconfont icon-xingzhuang";
            i.style.color = "rgb(86, 192, 15)";
            title.innerText = "驗證通過";
            title.style.color = "#fff";
            oRight.onmousemove = null;
            oRight.onmousedown = null;
          }
        }
      };
    };

style代碼

注：樣式為sass文件

*{margin: 0;padding: 0;box-sizing: border-box;}
    .login-select {
      width: 280px;
      height: 40px;
      margin: auto;
      margin-top: 20px;
      margin-left: 15px;
      margin-right: 15px;
      text-align: center;
      line-height: 40px;
      background: rgba(134, 134, 131, 0.6);
      display: flex;
      position: relative;
      #err-select {
        width: 138px;
        height: 38px;
        position: absolute;
        right: -152px;
        top: 0;
        color: #fff;
        font-size: 12px;
        border-radius: 5px;
        line-height: 38px;
        text-align: center;
        background: rgb(177, 71, 71);
      }
      #title-p {
        text-align: center;
        line-height: 40px;
        width: 100%;
        height: 100%;
        font-size: 14px;
        position: absolute;
      }
      #left-select {
        width: 0;
        height: 100%;
        transform: translate(0.3s);
        background: rgb(86, 192, 15);
      }
      #right-select {
        width: 40px;
        height: 40px;
        background: #fff;
        color: #aaaa;
        text-align: center;
        line-height: 40px;
        border: 1px solid #ccc;
        position: absolute;
        cursor: move;
      }
    }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: