javascript 实现进度条拖动---移动端 jquery写的移动端进度条，可以改为原生js。完整的代码在最后，直

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

今天记录一下移动端实现一个百分比进度条拖动的实现。需求很简单，就是一个移动端的进度条，类似手机调亮度或者音量那种，效果图如下：

写在前面的说明：为了懒省事在获取元素的时候我用了jquery的$, 不想用jquery的童鞋可以自己用原生js替代，但是其他的计算之类的，不影响。

代码：完整的代码我会放在最后，直接复制全部代码然后双击在浏览器中打开即可看到效果。但是！！值得注意的是：因为我写的这个是针对移动端的，所以要在浏览器的手机模式下才能用！！！

不想看啰嗦的盆友可以直接拉到底部食用现成的！

其实移动端和PC的原理是一样的，只是因为一个是触摸拖动一个是鼠标拖动，所以使用的方法不同，感兴趣的朋友可以自己写一个pc的。

下面是html代码，注意事项见图片：

<body>
    <div class="wrap" id="wrap">
      <div class="proportion" id="proportion"></div>
      <span class="box" id="box"></span>
    </div>
    <p>百分比： <span id="number"></span></p>
  </body>

这里是js代码，注意事项见图片： `

var touchStart_x = null,
  touchStart_y = null,
  touchMove_x = null,
  touchMove_y = null,
  boxStartX = null,
  boxStartY = null;

$("#box").on("touchstart", function (e) {
  touchStart_x = e.targetTouches[0].pageX;

  touchStart_y = e.targetTouches[0].pageY;

  boxStartX = $("#box").position().left;

  boxStartY = $("#box").position().top;
});
$("#box").on("touchmove", function (e) {
  touchMove_x = e.targetTouches[0].pageX - touchStart_x;

  touchMove_y = e.targetTouches[0].pageY - touchStart_y;

  let leftNum = boxStartX + touchMove_x;
  if (leftNum < 0) {
    leftNum = 0;
  } else if (leftNum > 285) {
    leftNum = 285;
  }

  $("#proportion").css({
    width: leftNum + 15,
  });

  // 计算百分比
  let allWidth = $("#wrap").width();
  if ((boxStartX + touchMove_x) <= 0) {
    let txt = "0%";
    $("#number").html(txt);
  }
  else if( (boxStartX + touchMove_x) >= 285){
    let txt = (((leftNum + 15) / allWidth) * 100).toFixed(0) + "%";
    $("#number").html(txt);
  }
  else{
    let txt = ((leftNum / allWidth) * 100).toFixed(0) + "%";
    $("#number").html(txt);
  }

  $("#box").css({
    left: leftNum,
  });
});

下面是全部代码，可以直接复制到本地一个新的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=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrap" id="wrap">
      <div class="proportion" id="proportion"></div>
      <span class="box" id="box"></span>
    </div>
    <p>百分比： <span id="number"></span></p>
  </body>

  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript">
    let wrap = document.getElementById("wrap");
    let box = document.getElementById("box");

    var touchStart_x = null,
      touchStart_y = null,
      touchMove_x = null,
      touchMove_y = null,
      boxStartX = null,
      boxStartY = null;

    $("#box").on("touchstart", function (e) {
      touchStart_x = e.targetTouches[0].pageX;

      touchStart_y = e.targetTouches[0].pageY;

      boxStartX = $("#box").position().left;

      boxStartY = $("#box").position().top;
    });
    $("#box").on("touchmove", function (e) {
      touchMove_x = e.targetTouches[0].pageX - touchStart_x;

      touchMove_y = e.targetTouches[0].pageY - touchStart_y;

      let leftNum = boxStartX + touchMove_x;
      if (leftNum < 0) {
        leftNum = 0;
      } else if (leftNum > 285) {
        leftNum = 285;
      }

      $("#proportion").css({
        width: leftNum + 15,
      });

      // 计算百分比
      let allWidth = $("#wrap").width();
      if ((boxStartX + touchMove_x) <= 0) {
        let txt = "0%";
        $("#number").html(txt);
      }
      else if( (boxStartX + touchMove_x) >= 285){
        let txt = (((leftNum + 15) / allWidth) * 100).toFixed(0) + "%";
        $("#number").html(txt);
      }
      else{
        let txt = ((leftNum / allWidth) * 100).toFixed(0) + "%";
        $("#number").html(txt);
      }

      $("#box").css({
        left: leftNum,
      });
    });
  </script>
  <style>
    *{
      box-sizing: border-box;
    }
    html {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    body{
      padding: 20px;
      box-sizing: border-box;
    }

    .wrap {
      position: relative;
      width: 300px;
      height: 10px;
      background-color: #eee;
      border-radius: 5px;
    }
    .proportion {
      width: 0;
      height: 10px;
      background-color: rgb(93, 233, 64);
      border-radius: 5px;
    }
    .box {
      position: absolute;
      left: 0;
      top: -3px;
      width: 15px;
      height: 15px;
      background-color: orange;
      border-radius: 50%;
      cursor: pointer;
    }
  </style>
</html>