效果图:
<!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>