html+css+js 快速打造进度条-阿里云开发者社区

开发者社区> 开发与运维> 正文

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

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

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

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


img_7ea3d4c0b6b5d03f0f13a3fc4d1240fc.png

2.给进度条加样式


img_4b3958b4e4c285320c4c01f5d8be691b.png

运行后看到效果:


img_0df57fef51b64cc8685e5b05a258c448.png

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

img_9a320b48294cc1cf8f7d7d687d17509e.png

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


img_2d8a2849981377c731e67a19976f7004.gif

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


5.完整代码:


img_73eb0b727169b8f5a6775e7295e04eed.png
img_e7758f64f28d8331a55b38d3d854fabd.png


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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章