1.说明：
推荐指数：★★★★
通俗易懂，小白一看就会，高手请飘过。
学python也是需要懂一点Html、Css、JavaScript的基础知识的。
建议_ k ; ; E ~ k使用vscode编辑器。
2.效果图1
3.代码：保存为htm9 n - D z 6 N ?l，用7 O + 8 ) t a j浏览器打开即可。
<!DOCTYPE html>
<html>
<head>
<meta charset=q a #\"UTF-8\">
<title>圆形百分比进度条效果</title>
<style type=\"text/css\">
*o - # M + E e{
margin: 0;
padding: 0;
}
.bgC z x C r = | / ~{
width: 200px;
hD @ FeiA m J ; { Z wght: 200px;o f S f Y ? D Q
border-radius: 100%;
background: #ccc} K 8 % 1 R;
position: relative;
margin: 20px az / f m kuto;
}
.cir] M @ # 5cle-right, .circle-left, .mask-right, .mask-left{
width: 200px;
height: 200px;
border-radius: 100%;
position: absolute;
top: 0;
lefA x * V At: 0;
}
.circle-right, .circle-left{
background: skyblue;
}
.maskD Z % t R | a ~ +-right, .mask~ 8 3 a j f c ~-left{
backgroC o ] v i S 2 & ound: #ccc;
}
.circle-right, .mask-right{
clip: rect(0,200px,200pa m s gx,100px);
}
.circle-left, .mask-left{
clip: rect(0,100px,200px,0);
}
.text{
widtS H 7 4 n , , /h: 160px;
height: 1. 4 ` , ] E : m U60px;
line-height: 160px;
text-align: cent8 q s r K h y 0 der;
font-size: 34px;
color: deepskyblue;
border-radius: 100%;
background: #fff;
position: absolute;
top: 20px~ / : G R d 0;
left: 20px;
}
</style>
</head>
<body>
&r R 9 B 3 Zlt;div classi 2 M - Q Y e i ?=\"bg\">
<div class=\"circle-right\"></div>
<!--100%是显示百分数，动态显示由0~100-->
<div clasE g o 0s=\"text\">100%</div>+ b m 4 0 i;
</div>
<script src=\"https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js\"></script>
<scripR 3 V Ft type=\"text/javascrip6 j 4 d K t\">
$(function(){
//获取百分比值
var num = parseInt($(\'.text\').html());
//通过计时器来显Y B % 4 | 8 t :示过渡的2 ~ ] 6 C ; l : J百分比进v D 6 i ^ K度
var temp = 0;
var timer = setIi c + 0 _ Z { cntervad 5 f hl(function(){
calculate(temp);
//清除计时器结束该方法调用
if(temp ==) | p num){
clearInterval(timer);
}
temp++;
},30)
//改变, + m ; ? C C - g页面显示百分比
function calcw : t qulate(value){
//改变页面显示的值
$(\'.text\').html(value + \'%\');
//清除上次调用该方法残留的效果
$(\'.circle-left\').remove();
$(M { [ T p ^ = M {\'.mask-right\').remove()7 . & m r;
//当百分比小于等于50
if(value <= 50){
var html = \'\';
html += \'<div class=\"mask-right\" style=\"transform:rotate(\'+ (value * 3.6) +\'deg)\"&g 8 7 8 d ( m t %t;</div>\';
//元素里添加子元素
$(\'.circle-right\').append(html);
}else{
valua b ? / ! 6e -= 50;
var html = \'\c 2 e : 4';
html += \h q . @ z _ N W'<div class=\"cX @ ! I s 7ircle-left\">\';
html += \'<div class=\"mask-left\" style=\"transform:rotate(\'+ (value * 3.6) +\'deg)\W f h i E * W"></div>\';
hte x cml += \'</div>\';
//元素后添加元素
$(\'.circle-right\').after(htmlG 6 D o t Y l);
}
}
})
</scrS J 6 M W !ipt>
</body>
</html>4.拆分法：把一个含有css和js（JavaScript）的html，拆掉三个文件，一个叫cirbar1.html,另外的叫：cirbar1.css! g 4 f和cirbar1.js文件，放在同一个文件夹内。这是./的意思，也可E x 0 O ? e !以指定文件夹。
4.1 cirbar1.html的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=\"UTF-8} Z [\">
<title>圆形百分比进度条效果v2</title>
<!--如果是style type=\"text/css\"这种直接在html中设置css，注意起@ d T F R n始是*，不是点-->
<!--style type=q ` p H r\"text/css\"--&- , *gt;
<link hre+ Q d zf=\"./cirbar1.css\" rel; ^ + I ] t m r=\"sA 6 S c t ~tK J F N p qylesheet\" />e E + , p m * M X;
</head>
<body>
<div class=\"bg\">
<div classb [ Q=\"circle-right\"></div>
<div class=\"text\">100%</div6 0 m ( K E 9 S A>
</div>
<!--这个外部js文件== E Vjquery.min.js，不能少，否则不能动了-->
<script src=\"https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js\"--></script>
<!--同样的，把写在html的js，新建一个cirbar1.D $ z % Z 6js，复制下去，保存，这样子简洁很多-->
<!--script type=\"text/javascript\"--&6 U | 6 =gt;
<script src=\"./| 4 VcirM d t ! J A .bar1.js\"&gz r 0 h M Tt;</script>
</body>
</html>4.2 cirbar1.css的代码：
*{
margin: 0;
padding: 0;
}
.bg{
width: 200px;
height: 200px;
border-radius: 100%;
backgroM ] ` } 0und: #ccc;
position: relativz 6 Y F ke;
margin: 20px auto;
}
.circle-right, .circle-left, .z * : U * & Emask-right, .mask-lefX 4 M - W tt{
width: 200px;
height: 200px;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
}
.circle-right, .circle-lv $ x O a * seft{
background: skyblue;
}
.M C z jmask-right, .mask-left{
background: #ccc;
}
.circle-right, .mask-right{
clip: re z cct(0,200px,200px,100px);
}
.circle-left, .mask-left{
clip: rect(0,J N + c E N [100px,200px,0)c D I !;
}
.text{
width: 160px;
h^ i M n 1eight: 160px;
line-height: 160px;
text-align: center;
font-size: 34px;
color: deepskyblue;
bordeH 1 Q t Nr-radius: 100%;
background: #fff;
position: absolute;
top: 20px;
left: 2= ) 50px;
}4.3 cirbar1.js的代码：
$(function(){
//获取百分比值@ D O } K
var num = parseInt($(\'.text\').html())4 1 # [ 3 ~ 0 I;
//通过计时器来显示过渡的百分比进度
var temp = 0;
vS l V 4 o p dar timer = setInterval(function(){
calc& : I ~ulate(temp)l 9 D;
//清除计时器结I g c束该方法调用
if(temp == num){
clearInterval(timer);
}
temp++;
},30)
//改变页面显示百分t K 2 7比
function calculate(value){
/V R u ./改变页面显示的值
$(\'.text\').html(value + \'%\');
//清除上次调用该方法} . B S /残留的效果
$(\'.circle-leftt N @ ; z 4 }\').removes 5 y X U -();
$(\'.mask-right\').remove();
//当百分比O | & N )小于等于50
if(value <= 50){
var html = \'\';
html += \'<div class=\"w 2 U O zmask-right\" style=\"transform:rotate(\'+ (value * 3.6) +\'deg)\"></div&gT W T ot;\';
//元素里i % X j添加子元素
$(\'.circle-right\').append(html);
}else{
value -= 50;
var html = \'\';
html += \'&. & F v 6 ` Vlt;div class=\"circle-left\"&X e 3 { L ~ fgt;5 @ q k h p T\';
html += \'<div class=\"mask-left\" sty! s A @ Ile=\"transform:rotate(\'+ (value * 3.6) +\'deg)\">&s I W % c { ^lt;/div>\';
html += \'</div>\';
//元素后添加元素
$(\'.circle-right\').after(html);
}
}
})==============================
再来一个，不用外部js文件的圆形进度条
顺带回顾一下相关知识。
=========================V w U | B K T O X====== _ g / G Q o (
5.效果图
6.w 4 i * I 1 e 8三个文件，放在同一个文件夹中
6.1 cirbar.html代码：
<!--第1步---声明html5-->
<!DOCTYPE ht~ p L Lml>
<!--第2步---html大框架-->
<html lang=\"en\">
<!--第2-1步---heaO M ` n u x Ud部分-->
<head>
<c l 4 . M q s w 2;!--第2-1-1步---meta部分：2 w 6 U B k i g声明字符编码格式：utf-8-->
<!--注意与python的第一行声明一样：# -*- coding: utf-8 -*: w y n J-->
<meta charseJ q = Et=\"utf-8\" />
<!--第2-1-2步---标题名称-->
<title>圆形进度条v1</ti7 * K / / | qtle>
<!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹3 E ) ` @ c w下-->
<!--第2-1-3步---导入css文件-->
<link hreY } t @ T K % @f=\".{ ` { 4 Q [ = ,/cirbar.css\" rel=\"stylesheet\" />
</heam ] _d>
<!-F n y t ] I 3 2-第2-2步---body部分-->
<body>
<!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->
&l5 A u R y Q z Xt;canvas class=Q P p ~ {\"canvas\" id=\"canvas\" width=\"400\" height=\"400\"></canvas>
<!--第2-2-] k ; w S L2步---导入/ ; O s 2 W O H fj, L :s文件部分-->
<script src=\"./cirbar.js\"></script>
<!--注意收尾-->
</body>
<!--注意收尾-->
</html>6.2 cirbar.css代码9 R r k c 4 A X l：
.canvas {
/*画布的背景颜色设置为：黑色*/
background:#303030;
}6.3 cirbar.js代码：
window.onload = function () {
var canvas = document.getElementById(v a 4 6\'canv l Xvas\'), //获取canvas元素
context = canvas.getContext(\'2d\'), //获取画` y h J图环境，指明为2d
centerX = canvas.width / 2, //Canvas中心点x轴坐标
cen6 F - N ~ tterY = canvas.height / 2, //Canvas中心点k m J x - Iy轴坐标
rad = Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度
speed = 0.1; //加载的快慢就靠它了
//绘制红色外圈
function blueCircle(n) {
context.save()D ~ 6 ? ) C;
context.g = ? ` s : E sstrokeStyle = \" #1E90FF\"; //随百分数转动的外圈的颜色为蓝色
context.lineWidth = 3; //设置线宽
context.beginPath(); //路径开始
//注意-为顺时针，+为逆时针
//用于绘制圆弧context.arc(x坐标，y坐标，半径，起9 M a J = I y A y始角度，终止角度，顺时针/逆时针)
//contex0 V ( x = I ; 8 ?t.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);
contextg ? | ; f & A.arc(centV g w D v & 7 RerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);
context.stroke(); //绘制
context.clo} , V 4 )sePath(); //路径结束
context.restore();
}
//绘制白色外圈，初始的白色外圈
function whiteCircle() {
context.save(Z m e);
contex+ a a Jt.beginPath();o d # _ l o [ Q
// 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持C w i一样
//context.strokeStyle = \"#F8F8FF_ i S x % 2 .\";
context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);
cony . D U @ ~text.stroke();
context.closePath();
context.restore(l 5 C Q E G y T);
}
//百分比文字绘制
function t! [ : m , 9 t Cext(n) {
context.save(); //save和restoS | % U u c rre可以保证样式属性只运用于该段canvas元素
context.strokeStyle = \"#7FFF00) F S 3 C [ K =\";//设置中间动态百分数的颜色
context.font = \"25pl u # nx Arial\"; //设置字体大小和字体
context.textAlign = \D 5 Q B ` 'center\';//字体水平居中
context.textBaseline = \'middle\';//字v M 体垂直居中
//绘制字体，并且指定位置
context.strokeText(n.toFixed(0) + 1 ] h L\"%\", centerX, centerY);
context.stroke(); //执行绘制
contex4 C E ` 9t.restore();
}
/@ = Y I O 2 V C 6/循环获取
(function drawFrame() {
window.; m l % 1 ]requestAnimationFrame(H X ! 4 v Udrx * v M 6awFramk Y 8e, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
whiteCircle();
text(speed);
blueCircle(speed);
if (speed < 100) {
//1可从后台获取值,也是从0~100，step为1，代表速度
speed += 1;
}
}());
}注意到6.3js文件与4.3js文件的区别了么？一个有：window.onload =，一个没有，且只有$和小括号，因为外部的就是文件定义了一部分功能。
本文系本站编辑转载，文章版权归原作者所有，内容为作者个人观点，转载目的在于传递更多信息，并不代表本站赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请与本站联系，本站将在第一时间删除内容！