手写带时间段切割的进度条

效果图：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
   <title>带时间段切割的进度条</title>
   <link rel="stylesheet" href="../../src/font-awesome/css/font-awesome.min.css">
   <style type="text/css">
      #progress_box{
         width: 500px;
         height: 20px;
         border: 1px solid  #ddd;
         display: flex;
         justify-content: center;
      }
      .startTime,.endTime{
         flex: 0 0 80px;
         width: 80px;
         text-align: center;
      }

      .progress-wrapper{
         flex: 1;
         position: relative;
         float:left;
         height: 20px;
      }
      .progress_bg{
         position: absolute;
         top:0;
         left: 0;
         height: 20px;
         width: 100%;
         border: 1px solid #ddd;
         border-radius: 5px;
         overflow: hidden;
         cursor: pointer;
         background-color:rgba(33,148,255,0.4);
         z-index: 9999;
      }
      .progress_hover_time{
         position: absolute;
         display: none;
         top:0;
         left: 0;
         width: 60px;
         height: 20px;
      }
      .progress_time{
         display: none;
         width: 100px;
         height: 20px;
         border-radius: 5px;
         position: absolute;
         background:transparent;
         left:0;
         top:0;
         cursor: pointer;
         border:1px #ddd solid;
         box-sizing:border-box;
         z-index: 500;
      }
      .progress_time:hover{
         border-color:#F7B824;
      }

   </style>
</head>
<body style="background-color: #fff;">
<div id="videobox">
   <div id="progress_box">
      <div class="startTime">12:00:00</div>
      <div class="progress-wrapper">
         <div class="progress_bg">
            <div class="progress_hover_time">12:00:00</div>
         </div>
         <div class="progress_time">
            <i class="fa fa-thumb-tack fa-lg" style="width: 20px;height: 20px"></i>
            <span id="progress_time">12:00:00</span>
         </div>

      </div>
      <div class="endTime">12:30:00</div>
   </div>
</div>


<script src="../../src/bootstrap/js/jquery-1.11.3.js"></script>
<script type="text/javascript">
  $(function(){
    var  tag = false,ox = 0,left = 0; //tag为鼠标确认事件标注ox鼠标拖动起点位置，left为鼠标进度条移动距离
     var moveFlag=false;
    var  bar_width=parseInt($('.progress_bg').width());
    var  bgleft = $('.progress_bg').offset().left;
    var timeleft=left; //默认时间显示位置和进度位置相同
   var allTime=30*60*1000;
   var beginTime=new Date("2019/3/4 12:00:00").getTime();
      $('.progress_bg').mouseenter(function (e) {
       console.log("mouseenter");
          moveFlag=true;
      }).mousemove(function (e) {
          console.log('mousemove');
          if(moveFlag){
              left = e.pageX - bgleft;
              console.log('left'+left+'bgleft'+bgleft+'e.pageX '+e.pageX );
              bgleft = $('.progress_bg').offset().left;
              left = e.pageX - bgleft;
              console.log('left'+left+'bgleft'+bgleft+'e.pageX '+e.pageX )
              if (left <= 0) {
                  left = 0;
              }else if (left > bar_width) {
                  left = bar_width;
              }
              console.log("beginTime"+beginTime);
              var timeShow=toLocaleDateString(((left/bar_width)*allTime) + beginTime);
              $('.progress_hover_time').text(timeShow);
              if(left>bar_width-60){
                  var offsetleft=bar_width-60;
                  $('.progress_hover_time').css("left",offsetleft+"px");
           }
           else{
                  $('.progress_hover_time').css("left",left+"px");

              }
              $('.progress_hover_time').css("display","block");

          }

      }).mouseleave(function (e) {
          moveFlag=false;
          console.log("mouseleave");
      });
    $('.progress_bg').mousedown(function () {
      tag = false;
      console.log('click+mousedown'+tag);
    }).mouseup(function () {
      console.log('click+mouseup')
    }).click(function(e) {//鼠标点击
      if (!tag) {
        bgleft = $('.progress_bg').offset().left;


        left = e.pageX - bgleft;
        console.log('bar_width'+bar_width+'timeleft'+timeleft+'left'+left+'bgleft'+bgleft+'e.pageX '+e.pageX )
        if (left <= 0) {
          left = 0;
        }else if (left > bar_width) {
          left = bar_width;
        }
          var timeShow=toLocaleDateString(((left/bar_width)*allTime) + beginTime)
          $('#progress_time').text(timeShow);
        if(left>bar_width-90){
            var offsetleft=bar_width-90;
              $('.progress_time').css('left', offsetleft);

          }
        else {
              $('.progress_time').css('left', left+"px");

          }
          $('.progress_time').css('display', "block");
          $('.progress_hover_time').css("display","none");

          console.log('click')
      }
    });
    function stopEvent(event){ //阻止冒泡事件
      //取消事件冒泡
      var e=arguments.callee.caller.arguments[0]||event; //若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容
      if (e && e.stopPropagation) {
        // this code is for Mozilla and Opera
        e.stopPropagation();
      } else if (window.event) {
        // this code is for IE
        window.event.cancelBubble = true;
      }
    }
  });

  function toLocaleDateString (ms) {
      var date=new Date(ms);
      return  addZero(date.getHours())+":"+addZero(date.getMinutes())+":"+addZero(date.getSeconds());
  }
  function addZero(num) {
      if(num<10)
          return "0" + num;
      return num;
  }
</script>
</body>
</html>