原生JavaScript实现拖动校验功能


Posted in Javascript onSeptember 29, 2020

本文实例为大家分享了JavaScript实现拖动校验的具体代码,供大家参考,具体内容如下

思路

1、页面布局采用定位,背景颜色变化bg的宽度为0,其宽度会随着滑块的移动而移动。

页面结构

<!--验证-->
<div class="box">
  <!--滑块-->
  <div class="btn"></div>
  <!--文字-->
  <p class="text">请滑动滑块</p>
  <!--背景-->
  <div class="bg"></div>
</div>

页面布局

/* 滑块使用定位,背景没有设置宽度*/
.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;//清除事件
此时验证成功,设立一个标记为表示验证成功flag=true,后续需要用到。

2.3 那么如果我们滑块拉到一半就松开了鼠标,滑块应该回到原始位置。但是如果已经验证成功了,那就不会回到原点。
鼠标松开事件触发,那么鼠标移动已经不能影响滑块了,那么此时需要清除移动事件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 事件的状态
    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;// 设置bg的z-index的值是为了处理党滑块经过原始值的时候,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>
    /* 滑块使用定位,背景没有设置宽度*/
    .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 事件的状态
      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;// 设置bg的z-index的值是为了处理党滑块经过原始值的时候,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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中文乱码的多种解决方法
Jun 21 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 #Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 #Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 #Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 #Javascript
JS中队列和双端队列实现及应用详解
Sep 29 #Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 #Javascript
js实现星星海特效的示例
Sep 28 #Javascript
You might like
php foreach 参数强制类型转换的问题
2010/12/10 PHP
php表单提交问题的解决方法
2011/04/12 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
转一个日期输入控件,支持FF
2007/04/27 Javascript
Javascript 获取LI里的内容
2008/12/17 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
Python用GET方法上传文件
2015/03/10 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
Python shutil模块用法实例分析
2019/10/02 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
迅雷Cued工作心得体会
2014/01/27 职场文书
家长给小学生的评语
2014/01/30 职场文书
职工运动会邀请函
2014/02/02 职场文书
yy司仪主持词
2014/03/22 职场文书
辩论会主持词
2015/07/03 职场文书
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技