<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5中的SVG属性实现圆形进度条效果</title>
<style>
#a{color:red;}
</style>
</head>
<body>
<svg width="440" height="440">
<text style="fill:black;" font-size="80" x="160" y="240" width="440" height="440" id="a">30%</text>
<circle cx="220" cy="220" r="170" stroke-width="40" stroke="#C9CACA" fill="none"></circle>
<circle id="c1" cx="220" cy="220" r="170" stroke-width="40" stroke="#E73468" fill="none"
transform="matrix(0,-1,1,0,0,440)" stroke-dasharray=""></circle>
</svg>
<script>
var circle = document.getElementById("c1");
var a = document.getElementById("a").innerHTML;
var b=parseInt(a)/100;
var percent = 0, perimeter = Math.PI * 2 * 170;
setInterval(function () {
if(percent<b){
circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1- percent));
percent+=1/100;
}
},100);
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）