h5圆环进度条

最新推荐文章于 2025-07-18 13:57:19 发布

SkyGst

最新推荐文章于 2025-07-18 13:57:19 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/SkyGst/article/details/52426747

本文介绍了如何使用HTML5来创建一个圆环形的进度条效果，通过获取元素并设置其属性来实现进度展示。

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

<head>
<meta charset="UTF-8">
<title>Document</title>

<style type="text/css">
#c{border:1px #000 solid;}
#c2{border:1px #000 solid;margin-top:500px;}
</style>

</head>
<body>

<canvas id="c" progress='0'></canvas>

<script>
start("c",100,70,"#e74c3c","#fff","#ddd","#e74c3c",2);
/*----------------------------------------------------------------------
/*参数说明
/*obj[对象id，或对象]，r1[大圆半径], r2[内圆直径]
/*r1_color[大圆颜色], r2_color[大圆颜色]
/*bg_color[圆环背景颜色],font_color[字体颜色],step[步长：数字增加]
/*[progress属性值为初始值]
/*---------------------------------------------------------------------*/
function start(obj,r1,r2,r1_color,r2_color,bg_color,font_color,step){

var circle=document.getElementById(obj)||obj;

var progress=circle.getAttribute(progress);