原生JavaScript實(shí)現(xiàn)拖動(dòng)校驗(yàn)功能

更新時(shí)間：2020年09月29日 11:46:58 作者：Let me shine

這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)拖動(dòng)校驗(yàn)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)拖動(dòng)校驗(yàn)的具體代碼，供大家參考，具體內(nèi)容如下

思路

1、頁面布局采用定位,背景顏色變化bg的寬度為0，其寬度會(huì)隨著滑塊的移動(dòng)而移動(dòng)。

頁面結(jié)構(gòu)

<!--驗(yàn)證-->
<div class="box">
  <!--滑塊-->
  <div class="btn"></div>
  <!--文字-->
  <p class="text">請(qǐng)滑動(dòng)滑塊</p>
  <!--背景-->
  <div class="bg"></div>
</div>

頁面布局

/* 滑塊使用定位，背景沒有設(shè)置寬度*/
.box {
  width: 250px;
  height: 50px;
  background-color: #ccc;
  position: relative;
  margin: 0 auto;
}
.btn {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  color: #ccc;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
  z-index: 4;
}
.text {
  position: absolute;
  height: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  user-select: none;
}
.bg {
  width: 0;
  height: 50px;
  background-color: #25c20f;
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
}

2、分析事件—鼠標(biāo)按下，鼠標(biāo)移動(dòng)，鼠標(biāo)松開

2.1 鼠標(biāo)按下，獲取此時(shí)事件的水平距離downX；鼠標(biāo)移動(dòng)，獲取此時(shí)事件的水平距離e.clientX；那么鼠標(biāo)移動(dòng)的距離moveX = e.clientX - downX,也就是滑塊跟著移動(dòng)的距離。即btn.style.left = moveX + 'px';同時(shí)bg的寬度也就是滑塊移動(dòng)的距離，即bg.style.width = moveX + 'px'

2.2 滑塊拉到頭了，表示驗(yàn)證成功
什么時(shí)候表示滑塊滑到頭了，也就是moveX等于box的寬度-滑塊的寬度。那么文字的改變成“驗(yàn)證成功”。且滑塊停留在了最有端。無論鼠標(biāo)點(diǎn)擊還是移動(dòng)，都不會(huì)在影響了。那就是清除事件，清除按鈕的鼠標(biāo)移動(dòng)和鼠標(biāo)按下事件btn.onmousemove = null; btn.onmousedown = null;//清除事件
此時(shí)驗(yàn)證成功，設(shè)立一個(gè)標(biāo)記為表示驗(yàn)證成功flag=true，后續(xù)需要用到。

2.3 那么如果我們滑塊拉到一半就松開了鼠標(biāo)，滑塊應(yīng)該回到原始位置。但是如果已經(jīng)驗(yàn)證成功了，那就不會(huì)回到原點(diǎn)。
鼠標(biāo)松開事件觸發(fā)，那么鼠標(biāo)移動(dòng)已經(jīng)不能影響滑塊了，那么此時(shí)需要清除移動(dòng)事件btn.onmousemove = null;沒有驗(yàn)證成功那就回到原點(diǎn)this.style.left = 0; bg.style.width = 0;

頁面動(dòng)作

function selector(name) {
  return document.querySelector(name);
}
var box = selector('.box'),
  btn = selector('.btn'),
  text = selector('.text'),
  bg = selector('.bg'),
  flag = false;
// 鼠標(biāo)按下，移動(dòng)，松開
// 按下的距離和移動(dòng)的距離差就是滑塊移動(dòng)的距離
btn.onmousedown = function (e) {//按鈕按下的
  var downX = e.clientX
  btn.onmousemove = function(e){//e 事件的狀態(tài)
    var moveX = e.clientX - downX;
    if(moveX > 0) {
      this.style.left = moveX + 'px';
      bg.style.width = moveX + 'px'
      // 滑塊拉到頭了，表示驗(yàn)證成功
      if (moveX >= box.offsetWidth - this.offsetWidth) {
        bg.style.zIndex = 1;// 設(shè)置bg的z-index的值是為了處理黨滑塊經(jīng)過原始值的時(shí)候，bg將文字覆蓋了。驗(yàn)證成功后，有讓文字顯示出來
        text.innerText = '驗(yàn)證成功';
        text.style.color = '#fff';
        flag = true;
        // 此時(shí)鼠標(biāo)移動(dòng)或者按下，滑塊不在跟著移動(dòng)了
        btn.onmousemove = null;//
        btn.onmousedown = null;//清除事件
      }
    }
  }
}
btn.onmouseup = function () {
  btn.onmousemove = null;
  // 如果驗(yàn)證成功了，那就不會(huì)回到原點(diǎn)
  if(flag){
    return ;
  }
  this.style.left = 0;
  bg.style.width = 0;
}

完整可以運(yùn)行的源碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /* 滑塊使用定位，背景沒有設(shè)置寬度*/
    .box {
      width: 250px;
      height: 50px;
      background-color: #ccc;
      position: relative;
      margin: 0 auto;
    }
    .btn {
      box-sizing: border-box;
      width: 50px;
      height: 50px;
      border: 1px solid #ccc;
      color: #ccc;
      background-color: #fff;
      position: absolute;
      left: 0;
      top: 0;
      cursor: pointer;
      z-index: 4;
    }
    .text {
      position: absolute;
      height: 50px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      user-select: none;
    }
    .bg {
      width: 0;
      height: 50px;
      background-color: #25c20f;
      z-index: 3;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>

<!--驗(yàn)證-->
<div class="box">
  <!--滑塊-->
  <div class="btn"></div>
  <!--文字-->
  <p class="text">請(qǐng)滑動(dòng)滑塊</p>
  <!--背景-->
  <div class="bg"></div>
</div>

<script>
  function selector(name) {
    return document.querySelector(name);
  }
  var box = selector('.box'),
    btn = selector('.btn'),
    text = selector('.text'),
    bg = selector('.bg'),
    flag = false;
  // 鼠標(biāo)按下，移動(dòng)，松開
  // 按下的距離和移動(dòng)的距離差就是滑塊移動(dòng)的距離
  btn.onmousedown = function (e) {//按鈕按下的
    var downX = e.clientX
    btn.onmousemove = function(e){//e 事件的狀態(tài)
      var moveX = e.clientX - downX;
      if(moveX > 0) {
        this.style.left = moveX + 'px';
        bg.style.width = moveX + 'px'
        // 滑塊拉到頭了，表示驗(yàn)證成功
        if (moveX >= box.offsetWidth - this.offsetWidth) {
          bg.style.zIndex = 1;// 設(shè)置bg的z-index的值是為了處理黨滑塊經(jīng)過原始值的時(shí)候，bg將文字覆蓋了。驗(yàn)證成功后，有讓文字顯示出來
          text.innerText = '驗(yàn)證成功';
          text.style.color = '#fff';
          flag = true;
          // 此時(shí)鼠標(biāo)移動(dòng)或者按下，滑塊不在跟著移動(dòng)了
          btn.onmousemove = null;//
          btn.onmousedown = null;//清除事件
        }
      }
    }
  }
  btn.onmouseup = function () {
    btn.onmousemove = null;
    // 如果驗(yàn)證成功了，那就不會(huì)回到原點(diǎn)
    if(flag){
      return ;
    }
    this.style.left = 0;
    bg.style.width = 0;
  }
</script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: