JS实现进度条

万物皆可联……

于 2022-08-11 21:15:20 发布

阅读量1.4k

点赞数

分类专栏： JS 文章标签： javascript css 前端

本文链接：https://blog.youkuaiyun.com/qq_35354139/article/details/126293261

版权

本文档介绍了如何使用HTML、CSS和JavaScript实现一个进度条效果。通过设置HTML结构，定义CSS样式，以及编写JS代码来动态更新进度，最终展示了一个功能完备的进度条组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码如下

<div class="jdt">
	<div class="jd"></div>
</div>

最外层div用于显示边框，里层div显示进度

CSS代码如下

.jdt{
				width: 400px;
				height: 30px;
				border-radius: 20px;
				border: 1px solid #666;
				overflow: hidden;
				margin: 200px auto;
			}
			.jd{
				width: 0%;
				height: 30px;
				background-image:linear-gradient(to right, red, #333, rgb(9, 206, 91));
				text-align: center;
				color: white;
			}

JS代码如下

var jd = document.querySelector(".jd"); //获取进度条div
			var b=setInterval("test()",70); //定义定时器
			var jdbfb=0; //进度百分比
            //定

最低0.47元/天解锁文章