【jquery】做一个可拖动可调速可点击的进度播放条
效果图
学前端的时候只学了大概两天的jquery，而且只是看视频并没有敲代码，所以让我用jquery写代码的时候内心是妈卖批的。。。
如果用vue的话我还有兴趣自己写一个，jquery就算了吧，在网上找了一下有没有源码，发现网上用jquery写的播放进度条只有两个源码，我采用了其中一个并进行修改。。
不知道源代码是什么时候写的，反正现在看着已经很落伍了，处理时间处理得特别笨拙，如果有小伙伴有兴趣可以自己全部重写一个，推荐用moment.js处理时间，简单方便快速！
源代码有一些变量我现在做完了也还没搞清楚是啥意思，想着反正实现了需求就vans了。。
// JavaScript Document
(function($) {
var isAction = false;
var width = 0;
var thewidth = 0;
var CurrTime = 0;
var xn=0;
var offsetww=0;
var t;
var h=0;
m=0;
s=0;
var cha2=0;
var addHour = 0,
addMinute = 0,
addSecond = 0,
TheHour = 0,
TheMinute = 0,
TheSecond = 0;
var flag = 0;
var alltime = 0;
var addwidth = 0;
var offsetW = 0;
var times = 0;
var rwidth = 0;
var speed=1000;
jQuery.playBar = {
addBar: function(DOM, allTime,markArr) {
CleanAll();
alltime = allTime;
DOM.empty();
DOM.append("00:00:00");
$(".BarControl").append('10:35');
$(".BarControl").append('停止结束快进后退正常');
width = $('.TheBar').width();
$('.tip').hide()
times = allTime / 1000;
rwidth = width - 8;
addwidth = (width - 10) / times;
var t = TransitionTime(allTime);
$('.BarFinishTime').html(t.StringTime);
//mark
var theBarWidth=$(".TheBar").width()
var theBarOffsetLeft=$(".TheBar").offset().left
for(let i=0;i· 
`)
})
$('.TheBar').mouseleave(function(e){
console.log("mouseleave")
$('.tip').hide()
})
$('.TheBar').click(function(e){
let offsetLeft=e.clientX-$(".TheBar").offset().left-20
let cha=(offsetLeft+20)/theBarWidth
//鼠标的相对坐标-ball相对坐标
cha2=offsetLeft+20-$('.TimeBall').position().left
// console.log(cha2)
if(!BarMove) {
$('.tip').css('left',cha-20)
}
xn = parseInt(cha * alltime);
// console.log(xn)
let ltx = (xn)=>{
m = parseFloat(xn) / 1000;
CurrTime=m
let time = "";
let second, minute, hour;
let haveHour = false;
let ch = parseInt(m / 3600.0)
let cm = parseInt((parseFloat(m / 3600.0) - parseInt(m / 3600.0)) * 60)
let csx = parseInt(m-(ch*3600+cm*60))
addHour=h=ch;
addMinute=m=cm;
addSecond=s=csx
};
ltx(xn)
offsetww=offsetLeft+20
$('.TheColorBar').css("width", offsetLeft+20);
$('.TimeBall').css("left", offsetLeft+20)
$('.BarBeginTime').html(`${h}:${m}:${s}`)
$('.tip').html(`${h}:${m}:${s}`)
})
},
restTime: function(allTime) {
CleanAll();
StopBar();
alltime = allTime;
width = $('.TheBar').width();
times = allTime / 1000;
rwidth = width - 8;
addwidth = (width - 10) / times;
var t = TransitionTime(allTime);
speed=1000
$('#speed').html('正常');
$('.BarFinishTime').html(t.StringTime);
$('.TheColorBar').css("width", 0);
$('.BarBeginTime').html(`00:00:00`)
$('.TimeBall').css("left", 0);
cha2=0
offsetww=0
// OpenBar()
},
Stop: function() {
StopBar()
},
Begin: function() {
OpenBar()
},
Forward:function(){
forward()
},
Back:function(){
back()
},
changeBarColor: function(COLOR) {
var color = typeof(COLOR) != "undefined" ? COLOR : '#3498DB';
$('.TheColorBar').css("background", color);
$('.TimeBall').css("background", color)
},
changeFontColor: function(COLOR) {
var color = typeof(COLOR) != "undefined" ? COLOR : '#3498DB';
$('.BarBeginTime,.BarFinishTime').css("color", color)
},
getTheTime: function() {
return CurrTime
}
};
function CleanAll() {
isAction = false;
thewidth = 0;
CurrTime = 0;
addHour = 0;
addMinute = 0;
addSecond = 0;
TheHour = 0;
TheMinute = 0;
TheSecond = 0;
offsetW = 0;
thewidth = 0;
flag = 0
}
var down = false;
var BarMove = false;
var lastX = 0,
NewX = 0;
$(document).on("mousedown", '.TimeBall', function(event) {
lastX = event.clientX;
event.preventDefault();
down = true;
BarMove = true;
if (isAction) {
StopBar()
}
});
$(document).mousemove(function(event) {
event.preventDefault();
NewX = event.clientX;
if (BarMove) {
var mcs = NewX - lastX;
lastX = NewX;
if (mcs < 0) {
if (thewidth - (-mcs) > 0) {
thewidth = thewidth - (-mcs)
}
} else {
if (thewidth + mcs < rwidth) {
thewidth = thewidth + mcs
} else {
thewidth = rwidth
}
}
// console.log(thewidth)
timechange();
$('.TheColorBar').css("width", thewidth + 1);
$('.TimeBall').css("left", thewidth)
}
});
$(document).mouseup(function() {
if (BarMove) {
console.log("mouseup")
BarMove = false;
down = false;
NewX = 0;
var xo = parseInt(CurrTime / 1000);
offsetW = thewidth - xo * addwidth;
console.log(isAction)
if (isAction) {
OpenBar()
}
}
});
function timechange() {
CurrTime = parseInt(thewidth / rwidth * alltime);
var ltx = TransitionTime(xn);
if (TheHour > 0) {
if (ltx.hHour) {
$('.tip').show()
// $('.tip').html(ltx.StringTime)
$('.BarBeginTime').html(ltx.StringTime)
} else {
$('.tip').show()
// $('.tip').html("00:" + ltx.StringTime)
$('.BarBeginTime').html("00:" + ltx.StringTime)
}
} else {
$('.tip').show()
// $('.tip').html(ltx.StringTime)
$('.BarBeginTime').html(ltx.StringTime)
}
addSecond = ltx.Tsec;
addMinute = ltx.Tmin;
addHour = ltx.Thour
}
function changeBar() {
var second, minute, hour;
thewidth =offsetww
// thewidth = thewidth * 1 + addwidth - offsetW;
if (offsetW > 0) {
offsetW = 0
}
console.log(addSecond)
if (thewidth < rwidth && CurrTime < alltime) {
CurrTime = CurrTime + 1 * 1000;
addSecond = addSecond + 1;
if (addSecond > 59) {
addSecond = 0;
addMinute = addMinute + 1;
if (addMinute > 59) {
addMinute = 0;
addHour = addHour + 1
}
}
if (addSecond > 9) {
second = "" + addSecond
} else {
second = "0" + addSecond
} if (addMinute > 9) {
minute = "" + addMinute
} else {
minute = "0" + addMinute
} if (addHour > 9) {
hour = "" + addHour
} else {
hour = "0" + addHour
} if (addHour > 0) {
flag = 1
}
if (flag == 0) {
$('.BarBeginTime').html(minute + ":" + second)
} else {
$('.BarBeginTime').html(hour + ":" + minute + ":" + second)
}
} else {
thewidth = rwidth;
StopBar()
}
$('.TheColorBar').css("width", thewidth + 1);
$('.TimeBall').css("left", thewidth)
}
function TransitionTime(str) {
var m = parseFloat(str) / 1000;
var time = "";
var second, minute, hour;
var haveHour = false;
var ch = 0,
csx = 0,
cm = 0;
if (m >= 60 && m < 60 * 60) {
hour = "00"
if (parseInt(m / 60.0) < 10) {
minute = "0" + parseInt(m / 60.0)
} else {
minute = parseInt(m / 60.0)
}
var cs = parseInt(m - parseInt(m / 60.0) * 60);
if (cs < 10) {
second = "0" + cs
} else {
second = "" + cs
}
TheMinute = parseInt(m / 60.0);
TheSecond = cs;
cm = TheMinute;
TheHour = 0;
csx = cs;
time = minute + ":" + second;
// $('.BarBeginTime').html("00:00")
} else if (m >= 60 * 60) {
flag = 1;
haveHour = true;
ch = parseInt(m / 3600.0);
cm = parseInt((parseFloat(m / 3600.0) - parseInt(m / 3600.0)) * 60);
csx=parseInt(m-(ch*3600+cm*60))
$('.BarBeginTime').css("margin-right", '6px')
if (ch < 10) {
hour = "0" + ch
} else {
hour = "" + ch
} if (cm < 10) {
minute = "0" + cm
} else {
minute = "" + cm
} if (csx < 10) {
second = "0" + csx
} else {
second = "" + csx
}
TheHour = ch;
TheMinute = cm;
TheSecond = csx;
time = hour + ":" + minute + ":" + second;
} else {
csx = parseInt(m);
if (parseInt(m) > 9) {
second = "" + parseInt(m)
} else {
second = "0" + parseInt(m)
}
TheMinute = 0;
TheSecond = parseInt(m);
TheHour = 0;
time = "00:" + second
}
var tt = {
hHour: haveHour,
Thour: ch,
Tmin: cm,
Tsec: csx,
StringTime: time
};
return tt
}
function StopBar() {
if (!down) {
isAction = false
}
clearInterval(t)
}
function OpenBar() {
isAction = true;
t = setInterval(changeBar, speed)
}
function forward() {
clearInterval(t)
speed=speed>300?speed-100:300,
console.log(speed)
t = setInterval(changeBar, speed)
let bei=(2000-speed)/1000
bei=bei==1?'正常':bei
$('#speed').html(bei);
}
function back() {
clearInterval(t)
speed=speed<1700?speed+100:1700,
console.log(speed)
t = setInterval(changeBar, speed)
let bei=(2000-speed)/1000
bei=bei==1?'正常':bei
$('#speed').html(bei);
}
})(jQuery);