自定义进度条_html input进度条-CSDN博客

本文链接：https://blog.csdn.net/qq_37899622/article/details/112560790

可拖拽可点击进度条，有个输入框显示相应进度，也可以通过输入控制进度条进度。
实现效果：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>可拖拽可点击进度条</title>
    <script src="./jquery-3.5.1.js"></script>
    <style>
      html,
      body {
        height: 100%;
      }
      body {
        margin: 0;
      }
      body > div {
        padding-top: 60px;
        margin-left: 60px;
      }
      #tiao {
        display: inline-block;
        width: 200px;
        height: 4px;
        background: #ddd;
        border-radius: 3px;
        position: relative;
        margin-left: 50px;
      }
      input {
        border: 1px solid #ddd;
        width: 100px;
        text-align: center;
        vertical-align: top;
      }
      #yuan {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50% 50%;
        background: #177ad8;
        position: absolute;
        margin-top: -4px;
        cursor: pointer;
        box-shadow: 0px 0px 3px #177ad8;
      }
      #jindu {
        width: 0px;
        height: 4px;
        background-color: #177ad8;
        border-radius: 3px;
      }
    </style>
  </head>
  <body>
    <div>
      <input
        type="text"
        id="input"
        value=""
        placeholder="0"
        autocomplete="off"
      />%
      <div id="tiao">
        <div id="yuan"></div>
        <div id="jindu"></div>
      </div>
    </div>

    <script>
      var input = document.getElementById("input");
      var yuan = document.getElementById("yuan");
      var jindu = document.getElementById("jindu");
      var tiao = document.getElementById("tiao");
      var tiaoW = tiao.offsetWidth;

      //进度条实现可拖拽
      function schedule() {
        var isfalse = false; //控制滑动
        yuan.onmousedown = function (e) {
          isfalse = true;
          var X = e.clientX; //获取当前元素相对于窗口的X左边
          var offleft = this.offsetLeft; //当前元素相对于父元素的左边距
          var max = tiao.offsetWidth - this.offsetWidth; //宽度的差值
          document.body.onmousemove = function (e) {
            if (isfalse == false) {
              return;
            }
            var changeX = e.clientX; //在移动的时候获取X坐标

            var moveX = Math.min(max, Math.max(-2, offleft + (changeX - X))); //超过总宽度取最大宽
            input.value = Math.round(Math.max(0, moveX / max) * 100);
            yuan.style.marginLeft = Math.max(0, moveX) + "px";
            jindu.style.width = moveX + "px";
          };
        };
        document.body.onmouseup = function () {
          isfalse = false;
        };

        //输入框输入值->进度条改变
        var minValue = 0;
        var maxValue = 100;
        $("#input")
          .blur(function () {
            //失去焦点触发
            var theV = this.value * 1;
            if (theV > maxValue || theV < minValue) {
              alert("输入的数值不正确");
              input.value = "";
              jindu.style.width = "0px";
              yuan.style.marginLeft = "0px";
              return;
            }
            var xxx = (theV / 100) * tiaoW;
            yuan.style.marginLeft = xxx - 6 + "px";
            jindu.style.width = xxx + "px";
          })
          .keyup(function () {
            if (event.keyCode == 13) {
              //按下回车触发
              $(this).blur();
            }
          });
      }
      schedule();

      //进度条实现可点击
      function progressClick() {
        //监听点击
        $("#tiao").click(function () {
          //此时的this是tiao
          var normalLeft = $(this).offset().left; //获取背景距离窗口默认的位置
          //console.log(normalLeft);

          var eventLeft = event.pageX; //获取点击的位置距离窗口默认的位置
          //console.log(eventLeft);

          //计算进度条长度、比例
          var len = eventLeft - normalLeft;
          var value = (eventLeft - normalLeft) / tiaoW;
          //设置进度条
          yuan.style.marginLeft = len - 6 + "px";
          jindu.style.width = len + "px";
          //设置输入框的对应值
          input.value = Math.round(value * 100);
        });
      }
      progressClick();
    </script>
  </body>
</html>

可拖拽可点击进度条，鼠标悬停在点上会提示进度。
（要用到bootstrap和jQuery）
实现效果：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>鼠标悬停显示进度的进度条</title>
    <link rel="stylesheet" href="./bootstrap.min.css" />
    <script src="./jquery-3.5.1.js"></script>
    <script src="./bootstrap.js"></script>
    <style>
      html,
      body {
        height: 100%;
      }
      body {
        margin: 0;
      }
      body > div {
        padding-top: 60px;
        margin-left: 60px;
      }
      #tiao {
        display: inline-block;
        width: 200px;
        height: 4px;
        background: #ddd;
        border-radius: 3px;
        position: relative;
        margin-left: 50px;
      }
      input {
        border: 1px solid #ddd;
        width: 100px;
        text-align: center;
        vertical-align: top;
      }
      #yuan {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50% 50%;
        background: #177ad8;
        position: absolute;
        margin-top: -4px;
        cursor: pointer;
        box-shadow: 0px 0px 3px #177ad8;
      }
      #jindu {
        width: 0px;
        height: 4px;
        background-color: #177ad8;
        border-radius: 3px;
      }
    </style>
  </head>
  <body>
    <div>
      <div id="tiao">
        <div
          id="yuan"
          data-toggle="tooltip"
          data-placement="top"
          title="0"
        ></div>
        <div id="jindu"></div>
      </div>
    </div>
    <script>
      var yuan = document.getElementById("yuan");
      var jindu = document.getElementById("jindu");
      var tiao = document.getElementById("tiao");
      var tiaoW = tiao.offsetWidth;

      //进度条实现可拖拽
      function schedule() {
        var isfalse = false; //控制滑动
        yuan.onmousedown = function (e) {
          isfalse = true;
          var X = e.clientX; //获取当前元素相对于窗口的X左边
          var offleft = this.offsetLeft; //当前元素相对于父元素的左边距
          var max = tiao.offsetWidth - this.offsetWidth; //宽度的差值
          document.body.onmousemove = function (e) {
            if (isfalse == false) {
              return;
            }
            var changeX = e.clientX; //在移动的时候获取X坐标

            var moveX = Math.min(max, Math.max(-2, offleft + (changeX - X))); //超过总宽度取最大宽
            var msg = Math.round(Math.max(0, moveX / max) * 100);
            $(function () {
              $("#yuan")
                .tooltip("destroy")
                .attr("title", msg)
                .tooltip("fixTitle")
                .tooltip("show");
            });
            yuan.style.marginLeft = Math.max(0, moveX) + "px";
            jindu.style.width = moveX + "px";
          };
        };
        document.body.onmouseup = function () {
          isfalse = false;
        };
      }
      schedule();

      //进度条实现可点击
      function progressClick() {
        //监听点击
        $("#tiao").click(function () {
          //此时的this是tiao
          var normalLeft = $(this).offset().left; //获取背景距离窗口默认的位置
          //console.log(normalLeft);

          var eventLeft = event.pageX; //获取点击的位置距离窗口默认的位置
          //console.log(eventLeft);

          //计算进度条长度、比例
          var len = eventLeft - normalLeft;
          var value = (eventLeft - normalLeft) / tiaoW;
          //设置进度条
          yuan.style.marginLeft = len - 6 + "px";
          jindu.style.width = len + "px";
          //设置输入框的对应值
          var msg = Math.round(value * 100);
          $(function () {
            console.log(msg);
            $("#yuan")
              .tooltip("destroy")
              .attr("title", msg)
              .tooltip("fixTitle")
              .tooltip("show");
          });
        });
      }
      progressClick();

      //鼠标悬停到圆点，提示进度
      function tips() {
        $("#yuan").mouseenter(function () {
          $("#yuan").tooltip("show");
        });
      }
      tips();
    </script>
  </body>
</html>