欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生JavaScript實現(xiàn)拖動校驗功能

 更新時間:2020年09月29日 11:46:58   作者:Let me shine  
這篇文章主要介紹了原生JavaScript實現(xiàn)拖動校驗功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

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

思路

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

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

<!--驗證-->
<div class="box">
  <!--滑塊-->
  <div class="btn"></div>
  <!--文字-->
  <p class="text">請滑動滑塊</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、分析事件—鼠標按下,鼠標移動,鼠標松開

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

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

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

頁面動作

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

完整可以運行的源碼

<!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>

<!--驗證-->
<div class="box">
  <!--滑塊-->
  <div class="btn"></div>
  <!--文字-->
  <p class="text">請滑動滑塊</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;
  // 鼠標按下,移動,松開
  // 按下的距離和移動的距離差就是滑塊移動的距離
  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'
        // 滑塊拉到頭了,表示驗證成功
        if (moveX >= box.offsetWidth - this.offsetWidth) {
          bg.style.zIndex = 1;// 設(shè)置bg的z-index的值是為了處理黨滑塊經(jīng)過原始值的時候,bg將文字覆蓋了。驗證成功后,有讓文字顯示出來
          text.innerText = '驗證成功';
          text.style.color = '#fff';
          flag = true;
          // 此時鼠標移動或者按下,滑塊不在跟著移動了
          btn.onmousemove = null;//
          btn.onmousedown = null;//清除事件
        }
      }
    }
  }
  btn.onmouseup = function () {
    btn.onmousemove = null;
    // 如果驗證成功了,那就不會回到原點
    if(flag){
      return ;
    }
    this.style.left = 0;
    bg.style.width = 0;
  }
</script>
</body>
</html>

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

相關(guān)文章

  • JS模式之簡單的訂閱者和發(fā)布者模式完整實例

    JS模式之簡單的訂閱者和發(fā)布者模式完整實例

    這篇文章主要介紹了JS模式之簡單的訂閱者和發(fā)布者模式,以一個完整實例形式詳細分析了JS訂閱者和發(fā)布者模式基本實現(xiàn)技巧,需要的朋友可以參考下
    2015-06-06
  • 簡單實現(xiàn)js選項卡切換效果

    簡單實現(xiàn)js選項卡切換效果

    這篇文章主要為大家介紹了簡單實現(xiàn)js選項卡切換效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-02-02
  • JS使用鏈式屬性表達式取值和賦值的實現(xiàn)方法

    JS使用鏈式屬性表達式取值和賦值的實現(xiàn)方法

    這篇文章主要給大家詳細介紹了JS如何使用鏈式屬性表達式取值和賦值,文章通過代碼示例介紹的非常詳細,對我們的學習或工作有一定的幫助,感興趣的同學可以參考一下
    2023-08-08
  • JS HTML5實現(xiàn)拖拽移動列表效果

    JS HTML5實現(xiàn)拖拽移動列表效果

    這篇文章主要為大家詳細介紹了JS HTML5實現(xiàn)拖拽移動列表效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-07-07
  • Bootstrap如何創(chuàng)建表單

    Bootstrap如何創(chuàng)建表單

    這篇文章主要為大家詳細介紹了Bootstrap如何創(chuàng)建表單,介紹了Bootstrap表單的三種類型,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-10-10
  • 快速上手uni-simple-router

    快速上手uni-simple-router

    這篇文章主要介紹了uni-simple-router,本文通過實例代碼給大家講解的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-11-11
  • js同時按下兩個方向鍵

    js同時按下兩個方向鍵

    本文通過實例代碼給大家介紹了js同時按下兩個方向鍵的實現(xiàn)方法,感興趣的朋友跟隨腳本之家小編一起看看吧
    2007-12-12
  • 微信小程序?qū)崿F(xiàn)輪播圖指示器

    微信小程序?qū)崿F(xiàn)輪播圖指示器

    這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)輪播圖指示器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-06-06
  • JavaScript的String字符串對象常用操作總結(jié)

    JavaScript的String字符串對象常用操作總結(jié)

    String對象用于存儲字符串數(shù)據(jù),這里我們做了JavaScript的String字符串對象常用操作總結(jié),需要的朋友可以參考下
    2016-05-05
  • js實現(xiàn)簡單貪吃蛇游戲

    js實現(xiàn)簡單貪吃蛇游戲

    這篇文章主要為大家詳細介紹了js實現(xiàn)簡單貪吃蛇游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-05-05

最新評論