html+css+js 快速打造进度条

html进度条在web播放器中很常见,之前html并没有进度条这个标签,html5后出了一个progress标签作为进度条,但是并不是很好用,那么接下来,我们将用css+html+js实现进度条效果,无需任何三方框架。

1.新建一个html文件:加入两个div作为进度条


html+css+js 快速打造进度条_第1张图片

2.给进度条加样式


html+css+js 快速打造进度条_第2张图片

运行后看到效果:


html+css+js 快速打造进度条_第3张图片

3.通过js让进度条动起来,因为html宽高可以用百分比,所以做进度条就方便了,直接改变进度条的width值就可以了,下面使用js定时器来模拟进度条变化。将进度条原来的宽带设置为0,因为进度条一开始默认都是0嘛,然后加入js代码:

html+css+js 快速打造进度条_第4张图片

4.运行测试:运行效果如下


说明:这里只是介绍怎么做一个进度条,所以随便搞个样式,至于美化就通过css来设置,比如圆角、渐变等。


5.完整代码:


html+css+js 快速打造进度条_第5张图片
html+css+js 快速打造进度条_第6张图片


总结:关于html+css+js实现进度条就完成了,是不是很简单?在写播放器的时候就可以派上用场了哦。喜欢我的文章记得关注我哦,喜欢就送一个❤️给我吧,一起学习,一起成长!

你可能感兴趣的:(html+css+js 快速打造进度条)