溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

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

發(fā)布時(shí)間：2020-10-29 17:15:38 來(lái)源：億速云 閱讀：145 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

本篇文章給大家分享的是有關(guān)使用原生JavaScript實(shí)現(xiàn)拖動(dòng)校驗(yàn)功能，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

思路

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

頁(yè)面結(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>

頁(yè)面布局

/* 滑塊使用定位，背景沒(méi)有設(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)松開(kāi)

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)證成功”。且滑塊停留在了最有端。無(wú)論鼠標(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 那么如果我們滑塊拉到一半就松開(kāi)了鼠標(biāo)，滑塊應(yīng)該回到原始位置。但是如果已經(jīng)驗(yàn)證成功了，那就不會(huì)回到原點(diǎn)。
鼠標(biāo)松開(kāi)事件觸發(fā)，那么鼠標(biāo)移動(dòng)已經(jīng)不能影響滑塊了，那么此時(shí)需要清除移動(dòng)事件btn.onmousemove = null;沒(méi)有驗(yàn)證成功那就回到原點(diǎn)this.style.left = 0; bg.style.width = 0;

頁(yè)面動(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)，松開(kāi)
// 按下的距離和移動(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)過(guò)原始值的時(shí)候，bg將文字覆蓋了。驗(yàn)證成功后，有讓文字顯示出來(lái)
        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>
    /* 滑塊使用定位，背景沒(méi)有設(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)，松開(kāi)
  // 按下的距離和移動(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)過(guò)原始值的時(shí)候，bg將文字覆蓋了。驗(yàn)證成功后，有讓文字顯示出來(lái)
          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>

以上就是使用原生JavaScript實(shí)現(xiàn)拖動(dòng)校驗(yàn)功能，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手