【jquery】做一个可拖动可调速可点击的进度播放条

最新推荐文章于 2023-01-13 10:31:21 发布
最新推荐文章于 2023-01-13 10:31:21 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： jQuery JavaScript 文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42706303/article/details/93887502
版权

效果图

效果图

 

学前端的时候只学了大概两天的jquery，而且只是看视频并没有敲代码，所以让我用jquery写代码的时候内心是妈卖批的。。。

如果用vue的话我还有兴趣自己写一个，jquery就算了吧，在网上找了一下有没有源码，发现网上用jquery写的播放进度条只有两个源码，我采用了其中一个并进行修改。。

不知道源代码是什么时候写的，反正现在看着已经很落伍了，处理时间处理得特别笨拙，如果有小伙伴有兴趣可以自己全部重写一个，推荐用moment.js处理时间，简单方便快速！

源代码有一些变量我现在做完了也还没搞清楚是啥意思，想着反正实现了需求就vans了。。

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>

<link  href="css/barstyle.css" rel="stylesheet">
<style type="text/css">
.test{
	width:400px;
	height:20px;
	position:fixed;
	left:50%;
	top:50%;
	margin-left:-200px;
	margin-top:-10px;
	}
.contral{
	width:50px;
	height:30px;
	line-height:30px;
	background:#3498DB;
	cursor:pointer;
	color:#fff;
	position:fixed;
	left:37%;
	top:50%;
	margin-left:-25px;
	margin-top:-45px;
	text-align:center;
	}
	.mark{
		position: absolute;
		font-size: 30px;
		top:-20px;
	}
	.btn{
		width:50px;
		height:30px;
		line-height:30px;
		background:#3498DB;
		cursor:pointer;
		color:#fff;
		margin-left:3%;
		margin-top:2%;
		display: inline-block;
	}
	
	.ss{
		position: absolute;
		top: -30px;
		left:-20px;
		/* border:1px solid white; */
		left:20px
	}
	
	.san{
		position: absolute;
		width:13px;
		left:10px;
		top:15px
	}
	
	.tip{
		position: absolute;
		top: -30px;
		left:-20px;
		/* border:1px solid white */
	}
</style>

<body>

<div class="test"></div>
<!-- <div class="contral">停止</div> -->

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-PlayBar.min.js"></script>
	
</script>
<script>
	$(function(){
		var action=false;
			let min=134			//分钟
			let sec=3			//秒数
		$.playBar.addBar($('.test'),1000*60*min+sec*1000,[0.3,0.5,0.7]);//第一个参数是需要显示播放器的容器，第二个参数为时间，单位毫秒,第三个参数是mark的数组
		$.playBar.changeBarColor("#72dfff");//设置进度条颜色
		
		$('#stop').html("开始");
				
				//暂停
				$('#stop').click(function(){
			if(action){
				$.playBar.Stop();
				action=false;
				$(this).html("继续");
				}else{
					$.playBar.Begin();
					action=true;
					$(this).html("暂停");
					}
			})
			
			//结束
			$('#end').click(function(){
					$.playBar.restTime(1000*60*min+sec*1000);
					action=false;
					$('#stop').html("开始");
			})
			
			//快进
			$('#forward').click(function(){
				$.playBar.Forward()
			})
			
			//后退
			$('#back').click(function(){
				$.playBar.Back()
			})
			
		
		});
</script>
</body>
</html>


// 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("<div class='BarControl'><div class='BarBeginTime'>00:00:00</div></div>");
            $(".BarControl").append('<div class="TheBar"><div class="TimeBall"><div class="tip"></div></div><div class="TheColorBar"></div></div><div class="BarFinishTime">10:35</div>');
            $(".BarControl").append('<div class="btn" id="stop">停止</div><div class="btn" id="end">结束</div><div class="btn" id="forward">快进</div><div class="btn" id="back">后退</div><span style="margin-left:4%" id="speed">正常</span>');			
			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<markArr.length;i++){
				(function(i){
					let  markOffsetLeft=theBarWidth*markArr[i]
					$(".TheBar").append('<div class="mark">·</div>')
					$(".mark").eq(i).css('left',markOffsetLeft)
				})(i)
			}
			console.log(theBarOffsetLeft)
			$('.TheBar').mousemove(function(e){
				//控制tip的显示与位置
				$('.tip').show()		
				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',cha2-20)
				}				
					xn = parseInt(cha * alltime);
					// console.log(xn)
					let ltx = (xn)=>{
						 m = parseFloat(xn) / 1000;
						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))
							
							h=ch;
							m=cm;
							s=csx				
					};
					ltx(xn)
					$('.tip').html(`${h}:${m}:${s}<img src="./san.png" class="san">`)
			
			})
			$('.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}<img src="./san.png" class="san">`)
			
			})
			
        },
        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);

 

独我乐嘻嘻
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery播放进度条，可调节速度，拖拽、点击改变进度
海未枯，风未静的博客
11-22 2283
首篇csdn博客，以前一直潜水状态，也不想发水文，也懒得发，今天勤奋一回 前言 业务需要有没有找到合适的轮子，干脆自己造一个 以下代码使用了es6；所以对兼容性有要求需要转es5; 目前代码没有发现严重的bug，有错再改；代码还算简洁（自我感觉），还有可优化的空间 播放，暂停，速率控件都未实现（我是不爱写ui的前端....） 使用 // 创建实例 $.playBar(o...
JQuery移动端播放进度条
qq_38069232的博客
12-17 557
JQuery移动端播放进度条 播放进度条其实就是普通进度条加上播放时长，这里记录下自己的思路 界面展示 videocontrol.html <!-- 功能按键 --> <nav class="nav"> <!-- 文件标题 --> <span class="nav-videoname"></span> <!-- 第一行（停止，播放） --> <a href="#" class="v
JQuery移动端播放进度条（可拖拽）
12-17
移动端视频进度条，可拖拽，可点击，附带时间转换，是移动端适配的所以记得用移动端界面查看；其中有带移动端适应布局，时间写死，需要使用的只需获取视频资源的时间即可。
jq+css实现 进度条动画——从0到指定位置——基础积累
yehaocheng520的博客
01-13 890
jq+css实现 进度条动画——从0到指定位置——基础积累
JQuery插件——progressbar进度条
热门推荐
KingCruel的专栏
11-29 1万+
JQuery进度条插件——progressbar $(document).ready(function() { //获取显示进度条控件.... $("#overGridCourse").find('span').progressBar({ barImage: '/images/progressb
html5JQ进度条,jquery实现的一个简单进度条效果实例
weixin_39889329的博客
06-05 345
jquery实现一个进度条的效果，或许在这里没有什么实际的作用，但是已经实现了进度条的部分原理，前端是怎么实现那种进度效果的。效果演示：进度条实现源码：jquery实现进度条.progressBar{width:200px;height:8px;border:1px solid #98AFB7;border-radius:5px;margin-top:10px;}#bar{width:0px;he...
jQuery带播放进度条水平时间轴
07-06
该播放进度条水平时间轴是一款带日期和星期，进度条播放的时间轴代码。
jq 自定义video视频进度条
u010022260的博客
10-11 1899
因工作需要，需要写一个自定义进度条，在网上找了一些，一直没找到如意的，看了一些网友的代码，然后自己重新写了一下。若有错误，欢迎指正。 参考了网友的代码：https://blog.csdn.net/weixin_33970449/article/details/85757733 注意：一定要在本地打开，不要通过HBuilder打开。 先贴全部代码： <!DOCTYPE html> &lt...
jQuery可拖动播放进度条插件
06-10
这是一款简单蓝色的播放进度条插件，支持拖动，可以控制，可设置时间等等，jQuery可拖动播放进度条代码。
Jquery进度条
Shellin_F的博客
09-25 525
Jquery我基本不用的，只会基本API，我一般都是用原生的写。 var num=50; $(".content").css("width",num+"%"); 定位什么就不写了。就这样的直接改他的宽度。  我真不知道还能怎么写。 后台获取数据修改宽度。 AJAX简单实现： 由于可能会出现跨域的情况，所以使用了jsonp  但是  我也
jQuery进度条案例
10-10
这是一个利用jQuery实现的抽奖进度条小工具，稍作修改可以直接使用
jQuery可拖动播放进度条代码
04-07
jQuery可拖动播放进度条代码是一款播放进度条插件，支持拖动，可以控制，可设置时间等等。
jQuery可拖动播放进度条插件.zip
09-22
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
jQuery点击按钮弹出层可拖动代码
06-10
一款鼠标点击按钮弹出，支持鼠标点击拖动移动位置的jQuery点击弹出层可拖动代码。
jQuery实现的可拖动播放进度条特效源码.zip
11-18
jQuery实现的可拖动播放进度条特效源码.zip
html 可调节进度条控件,jQuery简单实用的轻量级进度条插件
weixin_32761653的博客
06-04 327
jQMeter是一款简单实用的轻量级进度条jQuery插件，它可以显示为水平或垂直进度条，进度条加载时带有动画特效，你只需要简单的传入一些参数到jQMeter对象的构造函数中就可以完成你想要的进度条效果。该进度条插件的构造函数中允许你定义进度条的宽度、高度、背景色、进度条颜色等等参数，通过这些参数你可以构造自己的进度条样式。使用方法使用这个进度条插件必须先引入jQuery和jqmeter.min....
jquery 实现一个可以手动调节的进度条
初生的萌芽
09-12 1040
js 实现一个可以手动调节的进度条     pageEncoding="utf-8"%>      #box  {  position: relative;   width: 100px;   height: 50px;   margin:  50px auto 0;  }  #bg{  height: 16px;   margin-top:
jquery 数字从指定值在规定时间内变化到指定值，圆形进度条，可以用于进度条
qq_34297991的博客
07-09 485
$({ // 起始值 countNum: 20 }).animate({ // 最终值 countNum: 100 }, { // 动画持续时间 duration: 2000, easing: "linear", step: function() { // 设置每步动画计算的数值 $('.barPie__value').text(Math.round((this.countNum*100)/100)); }, complete: .
使用jq制作一个可拖拽的进度条
weixin_45669184的博客
08-01 384
html部分 <div class="progress"> <div class="progress_bg"> <div class="progress_bar"></div> </div> <div class="progress_btn"></div> <div class="text">0%</div> &l
jquery鼠标点击单元格变成可编辑文本状态,仅第一列
最新发布
12-26
Jquery是一个兼容各种浏览器的JavaScript库，它可以帮助我们简化DOM操作、事件处理、动画等操作。为了实现鼠标点击单元格变成可编辑文本状态，我们可以利用Jquery来完成这个功能。 首先，我们可以通过Jquery选择器来选中需要实现该功能的单元格，然后给该单元格绑定一个点击事件。在事件处理函数中，我们可以判断当前点击的单元格是否是第一列，如果是的话就将该单元格的内容变成可编辑状态。我们可以通过Jquery提供的方法来实现单元格内容的编辑，比如使用attr()方法来添加contenteditable属性，使得单元格的内容可编辑。 另外，我们还可以使用Jquery提供的其他方法来处理编辑后的数据，比如使用on()方法来监听单元格的失去焦点事件，当单元格失去焦点时将编辑后的文本保存下来并取消编辑状态。 最后，我们需要保证只有第一列的单元格可以进行编辑，因此在点击事件处理函数中我们需要判断当前点击的单元格是否是第一列，如果不是则不执行后续的编辑操作。 通过以上方法，我们可以使用Jquery来实现鼠标点击单元格变成可编辑文本状态，且仅限于第一列的功能。这样就可以方便用户编辑表格中的数据并且确保只有指定的单元格可以编辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值