js/快应用: 可以拖动的步骤条或滑块 （定制）

最新推荐文章于 2023-03-20 15:02:02 发布
最新推荐文章于 2023-03-20 15:02:02 发布
阅读量437 收藏 2
点赞数 1
分类专栏： 快应用 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36413371/article/details/120838074
版权

参考文章： 链接

  1. pc
<!DOCTYPE>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>进度条</title>
    <style>
        /* 整体样式，消除默认样式 */
        
        body{
           margin:0;
           padding:0;
        }
        #box{
           position:relative;
           width:1000px;
           height:30px;
           margin:100px auto;
        }    
        #progress{
           position:relative;
           width:900px;
           height:30px;
           background:#999999;
           border-radius:8px;
           margin:0 auto; 
        }
        #progress_head{
           width:0px;
           height:100%;
           border-top-left-radius:8px;
           border-bottom-left-radius:8px;
           background:#9933CC;
           
        }
        #span{
           position:absolute;
           width:20px;
           height:38px;
           background:#9933CC;
           top:-4px;
           left:0px;
           cursor:pointer;
        }
        /* #percentage{
           position:absolute;
           line-height:30px;
           text-align:center;
           right:-44px;
           top:0;
        } */
        
        
    </style>
</head>
<body>

    <!-- 整体盒子 -->
    <div id="box">
          <!-- 进度条整体 -->
          <div id="progress">
                  <!-- 进度条长度 -->
               <div id="progress_head"></div>
                  <!-- 进度条移动条 -->
               <span id="span"></span>
          <div>
            <!-- 显示数据 -->
          <!-- <div id="percentage">0%</div> -->
    </div>

</body>
</html>
<script>

    //js获取节点
    var oProgress=document.getElementById('progress');
    var oProgress_head=document.getElementById('progress_head');
    var oSpan=document.getElementById('span');
    // var oPercentage=document.getElementById('percentage')

    //添加事件  鼠标按下的事件
    oSpan.onmousedown=function(event){
         
         var event=event || window.event;
         console.log(event)
        // clientX： 相对文档的水平坐标
        // clientY： 相对文档的垂直坐标
        // offsetLeft值跟offsetTop值的获取跟父级元素没关系，而是跟其上一级的定位元素(除position:static;外的所有定位如fixed,relative,absolute)有关系。
        // offsetLeft： 对象相对于版面或由 offsetParent 左侧位置
        // offsetTop：对象相对于版面或由 offsetTop 顶端位置
         var x=event.clientX-oSpan.offsetLeft;
         console.log('x', x)

        // 监听鼠标移动
         document.onmousemove=function(){
             
              var event=event || window.event;
              var wX=event.clientX-x;
              console.log('wX 元素的实时坐标', wX)
              console.log(oProgress.offsetWidth) // 900 进度条整体的宽度
              
              
              if(wX<0)
              {
                  wX=0;
              }else if(wX>=oProgress.offsetWidth-20)
              {
                  wX=oProgress.offsetWidth - 20;
              }
              oProgress_head.style.width=wX+'px';
              oSpan.style.left=wX+'px';
              
            //   oPercentage.innerHTML=parseInt(wX/(oProgress.offsetWidth-20)*100)+'%';
              
              
              return false;
         };
         
         document.onmouseup=function(){
              
              document.onmousemove=null;
              
         };
         
    };
    
</script>
  1. 移动端
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body {
            height: 100%;
        }
        body{
           margin:0;
           padding:0;
        }
        #box{
           position:relative;
           width:300px;
           height:30px;
           margin:100px auto;
        }    
        #progress{
           position:relative;
           width:200px;
           height:30px;
           background:#999999;
           border-radius:8px;
           margin:0 auto; 
        }
        #progress_head{
           width:0px;
           height:100%;
           border-top-left-radius:8px;
           border-bottom-left-radius:8px;
           background:#9933CC;
           
        }
        #span{
           position:absolute;
           width:20px;
           height:38px;
           background:#9933CC;
           top:-4px;
           left:0px;
           cursor:pointer;
        }
    </style>
</head>
<body>
    <div id="box">
        <!-- 进度条整体 -->
        <div id="progress">
                <!-- 进度条长度 -->
             <div id="progress_head"></div>
                <!-- 进度条移动条 -->
             <span id="span"></span>
        <div>
  </div>
  <script>
      //js获取节点
    var oProgress=document.getElementById('progress'); // 进度条整体的宽度
    var oProgress_head=document.getElementById('progress_head'); // 左侧覆盖区域
    var oSpan=document.getElementById('span'); // 进度条滑块
    var oProgressWidth = Number(oProgress.clientWidth)
    var oSpanWidth = Number(oSpan.clientWidth)
    var width = oProgressWidth - oSpanWidth
    console.log('width', typeof width, width)


    oSpan.ontouchstart = (evt) => {
        console.log(evt)
        var touch = evt.touches[0]; //获取第一个触点
        var clientX = Number(evt.touches[0].clientX)
        console.log('touches[0]...', evt.touches[0])
        console.log('触摸目标在视口中的x坐标。', evt.touches[0].clientX)
        var x = Number(touch.screenX) - Number(touch.pageX)
        // var x = Number(touch.screenX)
        var pageX = touch.pageX
        console.log('oSpan距离页面左侧的距离', pageX)
        console.log('oProgress距离页面左侧的距离', oProgress.getBoundingClientRect().left) // 'oProgress距离页面左侧的距离',
        console.log('oSpan距离页面左侧的距离', oSpan.getBoundingClientRect().left)
        let leftDistance = oSpan.getBoundingClientRect().left - oProgress.getBoundingClientRect().left
        console.log('左侧距离', leftDistance)
        console.log('--------')
        oSpan.ontouchmove = (event) => {
            // console.log('oProgress距离页面左侧的距离', oProgress.getBoundingClientRect().left)
            console.log('pageX-', event.touches[0].pageX)
            // console.log('screenX-', event.touches[0].pageX) // 等于pageX
            var touchMove = event.touches[0];
            var pageXMove = event.touches[0].pageX;
            // console.log('touchMove', touchMove)
            // var wX=Number(touchMove.pageX);
            // var wX=Number(touchMove.screenX)-x; // 移动的距离
            var wX=Number(touchMove.pageX)-pageX; // 移动的距离
            console.log('移动wX', wX)

            // console.log('Number(touchMove.clientX )', Number(touchMove.clientX ))
            console.log('负的值', -leftDistance)
            if(wX == 0) {
                wX = leftDistance
            } else if (wX < -leftDistance) {
                wX=0;
            }
            else if( wX < 0 && wX >= -leftDistance )
              {
              }else if(wX<=width)
              {
              } else if (wX>width) {
                wX = width
              }
            oSpan.style.left= leftDistance +  wX+'px';
              
        }

        document.onmouseup=function(){
              
              document.onmousemove=null;
              
         };
    }
  </script>
</body>
</html>
  1. 快应用
<template>
  <!-- template里只能有一个根节点 -->
  <div class="wrapper">
    <div id="box">
      <!-- 进度条整体 -->
      <div id="progress">
        <!-- 进度条长度 -->
        <div id="progress_head"></div>
        <!-- 进度条移动条 -->
        <!-- <stack> -->
        <div
          style="left: {{changeX}}px"
          id="span"
          ontouchstart="touchstartFn()"
          ontouchmove="touchmoveFn()"
          ontouchend="touchendFn()"
          ontouchcancel="touchcancelFn()"
        >
          <text>{{ '开始-结束时间' }}</text>
        </div>
        <!-- </stack> -->
      </div>
    </div>
    <!-- <text class="title">{{ title }}</text> -->
    <!-- 点击跳转详情页 -->
    <!-- <input
      class="btn"
      type="button"
      value="跳转到详情页"
      οnclick="onDetailBtnClick"
    /> -->
  </div>
</template>

<script>
import router from '@system.router'

export default {
  // 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖
  data: {
    oProgressWidth: 0,
    oSpanWidth: 0,
    width: 0,
    oProgressLeft: 0,
    oSpanLeft: 0,
    clientX: 0,
    leftDistance: 0,
    changeX: 0
  },

  onShow() {
    setTimeout(() => {
      var oSpan = this.$element('span');
      // oSpan.style.transform = `translateX(${200}px)`;
      this.changeX = 200
    }, 3000)
    //js获取节点
    // var oProgress = document.getElementById('progress'); // 进度条整体的宽度
    // var oProgress = this.$element('progress'); // 进度条整体的宽度
    // // var oSpan = document.getElementById('span'); // 进度条滑块
    // var oSpan = this.$element('span'); // 进度条滑块
    // // var oProgress_head = document.getElementById('progress_head'); // 左侧覆盖区域
    // var oProgress_head = this.$element('progress_head'); // 左侧覆盖区域
    //  var oProgressWidth = 0
    // var oSpanWidth = 0
    // var width = 0
    // console.log('width', typeof width, width)

    // var oProgressWidth = Number(oProgress.clientWidth)
    // var oSpanWidth = Number(oSpan.clientWidth)
    // var width = oProgressWidth - oSpanWidth
    // console.log('width', typeof width, width)
  },
  touchendFn() {
    console.log('touchendFn')
  },
  touchcancelFn() {
    console.log('touchcancelFn')
  },
  touchmoveFn(event) {
    var oSpan = this.$element('span');
    // console.log('oProgress距离页面左侧的距离', oProgress.getBoundingClientRect().left)
    console.log('clientX-', event.touches[0].clientX)
    // console.log('screenX-', event.touches[0].clientX) // 等于clientX
    var touchMove = event.touches[0];
    var clientXMove = event.touches[0].clientX;
    // console.log('touchMove', touchMove)
    // var wX=Number(touchMove.clientX);
    // var wX=Number(touchMove.screenX)-x; // 移动的距离
    var wX = Number(touchMove.clientX) - this.clientX; // 移动的距离
    console.log('移动wX', wX)

    // console.log('Number(touchMove.clientX )', Number(touchMove.clientX ))
    // console.log('负的值', -leftDistance)
    let leftDistance = this.leftDistance
    console.log('leftDistance', leftDistance)
    let width = this.width
    // console.log('width', this.width)
    if (wX < -leftDistance) {
      // wX = 0
      this.changeX = 0
    }
    else if (wX< 0 && wX >= -leftDistance) {
      this.changeX = leftDistance + wX
    }

    else if (wX === 0) {
      // wX = 0;
      this.changeX = leftDistance
    }
    else if (wX <= (width - leftDistance)) {
      this.changeX = leftDistance + wX
      // this.changeX = width
    }  else  {
      
      this.changeX = width
    }
    // oSpan.style.left = leftDistance + wX + 'px';

  },
  touchstartFn(evt) {
    // if (this.oProgressWidth === 0 || this.oSpanWidth === 0) { return }

    // var oProgress = document.getElementById('progress'); // 进度条整体的宽度
    var oProgress = this.$element('progress'); // 进度条整体的宽度
    // var oSpan = document.getElementById('span'); // 进度条滑块
    var oSpan = this.$element('span'); // 进度条滑块
    // var oProgress_head = document.getElementById('progress_head'); // 左侧覆盖区域
    var oProgress_head = this.$element('progress_head'); // 左侧覆盖区域
    this.getElementData(oProgress, oSpan, (data1, data2) => {
      if (!data2) {
        return
      } else {
        this.oSpanWidth = Number(data2.width)
        this.oSpanLeft = Number(data2.left)
      }

      if (!data1) {
        return
      } else {
        this.oProgressWidth = Number(data1.width)
        this.oProgressLeft = Number(data1.left)
      }
      if (this.oProgressWidth === 0 || this.oSpanWidth === 0) { return }
      this.width = this.oProgressWidth - this.oSpanWidth
      // console.log('this.width', this.width)
      console.log('touchstartFn', evt, this.width)
      this.leftDistance = this.oSpanLeft - this.oProgressLeft
      // console.log('leftDistance', this.leftDistance)
      // console.log('执行')
      // this.startMove(data1)
      var touch = evt.touches[0]; //获取第一个触点
      var clientX = Number(evt.touches[0].clientX)
      // console.log('touches[0]...', evt.touches[0])
      // var x = Number(touch.screenX) - Number(touch.clientX)
      // var x = Number(touch.screenX)
      this.clientX = touch.clientX
      console.log('触摸目标在视口中的x坐标。', evt.touches[0].clientX)
    })
    // var touch = evt.touches[0]; //获取第一个触点
    // var clientX = Number(evt.touches[0].clientX)
    // console.log('touches[0]...', evt.touches[0])
    // console.log('触摸目标在视口中的x坐标。', evt.touches[0].clientX)
    // var x = Number(touch.screenX) - Number(touch.clientX)
    // // var x = Number(touch.screenX)
    // var clientX = touch.clientX
    // console.log('oSpan距离页面左侧的距离', clientX)
    // console.log('oProgress距离页面左侧的距离', oProgress.getBoundingClientRect().left) // 'oProgress距离页面左侧的距离',
    // console.log('oSpan距离页面左侧的距离', oSpan.getBoundingClientRect().left)
    // let leftDistance = oSpan.getBoundingClientRect().left - oProgress.getBoundingClientRect().left
    // console.log('左侧距离', leftDistance)
    // console.log('--------')
  },
  getElementData(oProgress, oSpan, callback) {
    const promiseA = new Promise((resolutionFunc, rejectionFunc) => {
      oProgress.getBoundingClientRect({
        success: (data) => {
          resolutionFunc(data);
        }
      })
    });
    const promiseB = new Promise((resolutionFunc, rejectionFunc) => {
      oSpan.getBoundingClientRect({
        success: (data) => {
          resolutionFunc(data);
        }
      })
    });

    promiseA.then(data => {
      promiseB.then(dat => {
        console.log('data, dat', data, dat)
        callback && callback(data, dat)
      })
    })
  }
}
</script>

<style lang="scss">
#box {
  position: relative;
  width: 700px;
  height: 60px;
  margin: 100px auto;
}
#progress {
  position: relative;
  width: 600px;
  height: 60px;
  background-color: #999999;
  border-radius: 8px;
  margin: 0 auto;
}
#progress_head {
  width: 0px;
  height: 100%;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  background-color: #9933cc;
}
#span {
  position: absolute;
  width: 80px;
  height: 72px;
  background-color: #9933cc;
  top: -4px;
  left: 0px;
  /* cursor:pointer; */
}
/* @import './../../assets/styles/style.scss';

.wrapper {
  @include flex-box-mixins(column, center, center);
  .title {
    font-size: 8 * $size-factor;
    text-align: center;
    color: $black;
  }

  .btn {
    width: 90 * $size-factor;
    height: 16 * $size-factor;
    border-radius: 8 * $size-factor;
    background-color: $brand;
    color: $white;
    font-size: 30px;
    margin-top: 16 * $size-factor;
  }
} */
</style>
小强有个dream
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现动态进度条
zhunmumu的专栏
10-11 1209
  最终效果：     以下是代码解释： 1.$(#a)就是要实现进度条的那个div（关键代码）  $(#a).progressbar({     width : 200,  //设置进度条宽度 默认400     height : 15,  //设置进度条高度 默认22     value : 0,   //设置进度条值 默认0     text : '{value}%', //设置...
【快应用】任意拖动图标实现案例
华为开发者联盟
12-08 182
快应用页面开发阶段，ui布局时总是会遇到要在页面上实现一个可以任意拖动的导航栏，且在拖动时不能超出屏幕和导航栏不能在到边界时被压缩。一些开发者就会被困住了，这里就介绍一个实现导航栏的一个简易方式。方案：1、通过block实现组件堆叠效果，使得image图标位于list组件上方，并将image的样式设置为“position: fixed”。2、通过监听image组件的touchmove触摸事件实现动态设置其位置，具体可参见“通用事件”中的“touchmove事件”和“TouchEvent类型说明”。
带 HTML CSS 和 JavaScript 的步骤进度条（免费代码）
最新发布
WordPress主题大全
03-20 1956
如果您想创建，那么本教程将对您有所帮助。在本文中，您将学习如何使用 Html、CSS 和 JavaScript 创建步骤进度条。早些时候我展示了许多其他类型的进度条设计，如动画进度条、圆形进度条等。我已经与您分享了带有进度条的多步骤表单的设计。这个动画步骤进度条的css制作的非常简单。那里有两个按钮可以控制步骤，它们将逐步进行。我在这个多步骤进度条 css 中使用了 4 个步骤。如果你愿意，你可以使用更多。我使用了一些 javascript 来创建这。横步进度条主要用在注册表中。
步骤条(Progress Steps)
qq_45268602的博客
01-28 1912
重点： 1、使用flex布局 2、使用伪元素 3、计算进度条宽度，进行类名操作 实现代码： index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic.
steps.js 步骤条、时间轴
热门推荐
樊小书生
09-22 2万+
介绍 steps.js是基于原生JavaScript的组件，可用于展示步骤条、时间轴等，功能支持： 自适应 支持横向和纵向显示，并且横向还支持居中显示 支持自定义间距 主轴线上下左右单方向及多方向分布 支持数字和圆点及自定义图标，也可以使用图片 如果标题和详情还不足以满足您的需求，你还可以插入自定义的html代码 如果样式不满意，可以加入自定义的父类class，然后根据css的权重重新定义样式 ...
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
10-18
给大家介绍了基于vue实现拖动滑块验证功能，代码引用css与js都是线上的，将代码全部复制到一个html中可以直接打开，超级简单，感兴趣的朋友跟随脚本之家小编一起看看吧
js滑块拖动企鹅翻滚特效特效代码
03-20
在JavaScript的世界里，滑块是一种常见的用户界面元素，它允许用户通过拖动滑动条来选择一个数值范围内的值。这种交互方式直观且易于操作，常用于调整音量、亮度或者设置进度等场景。"js滑块拖动企鹅翻滚特效特效...
drag-slider:拖动滑块插件，原生javascript，不参考其他库
07-07
本文将深入探讨“drag-slider”这个原生JavaScript实现的拖动滑块插件，它不依赖任何外部库，如jQuery或其他UI框架。 ### 1. 原生JavaScript的重要性 原生JavaScript意味着代码直接使用JavaScript语言编写，没有...
原生JS封装拖动验证滑块的实现代码示例
10-15
总结起来，实现原生JS拖动验证滑块涉及的主要步骤包括： 1. 创建滑块和轨道的DOM元素。 2. 添加鼠标事件监听器。 3. 编写拖动逻辑，更新滑块位置。 4. 实现验证逻辑，判断滑块是否到达正确位置。 5. 提供自定义配置...
js企鹅滚动范围滑块拖动选值特效
06-11
"js企鹅滚动范围滑块拖动选值特效"是一个这样的功能，它为网页增添了一种新颖且有趣的交互方式，允许用户通过拖动企鹅形状的滑块来选择数值。这个特效不仅增加了用户的参与度，还能使数据输入过程变得生动有趣。 ...
很实用的步骤条
02-05
很漂亮 且很实用的步骤条 下载就可使用
jQuery-带节点步骤进度条插件
03-07
jQuery-带节点步骤进度条插件
CSS步骤条，进度条
04-27
CSS步骤条，进度条，纯css，挺舒服的，可惜不能传图片
jq步骤条 java,jQuery步骤条进度条插件setStep.js
weixin_35869703的博客
03-16 839
插件描述：一款简单额步骤条，可点击 也可按钮控制。更新时间：2018/9/4 上午10:42:15更新说明：增加横向箭头样式步骤条。用法：varstep1=newSetStep({skin:3,//调节1,2,3更换皮肤。content:'.skin1',showBtn:false,descripttionHeader:['步骤一','步骤二','步骤三','步骤四',...
可滑动进度条js编写
qq_35568841的博客
06-15 521
今晚写了一个简单进度条，如下所示： 分析组成： 整个进度条由三块组成，蓝色、红色、紫色三块。其中红色按钮块能够移动，改变紫色和蓝色的宽度。 分析原理： 1.进度条最初样式如下： 2.蓝色块初始宽度为0px，随着红色块的移动，蓝色块宽度跟着改变。 3.其次需注意，拖动红色块设置三种鼠标事件，移动事件（onmousemove），鼠标按下事件（onmousedown），鼠标按压释放事件（onmous...
js实现流程动态显示
YQ的博客
03-14 1万+
对于有很多流程的东西，我们希望能够根据不同的阶段，用流程条对应地进行显示，如下所示： 以上功能对应的html代码如下： 漏洞处理状态
Steps 步骤条
weixin_30667301的博客
03-14 2837
引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。 基础用法 简单的步骤条。 设置active属性，接受一个Number，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置space属性即可，它接受Boolean，单位为px，如果不设置，则为自适应。设置finish-status属性可以改变已经完成的步骤的状态。 1 <el...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值