发布时间：2026-07-21阅读(1)
1.说明：
推荐指数：★★★★
通俗易懂，小白一看就会，高手请飘过。
学python也是需要懂一点html、Css、JavaScript的基础知识的。
建议使用vscode编辑器。
2.效果图1
3.代码：保存为html，用浏览器打开即可。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>圆形百分比进度条效果</title><style type="text/css">*{margin: 0;padding: 0;}.bg{width: 200px;height: 200px;border-radius: 100%;background: #ccc;position: relative;margin: 20px auto;}.circle-right, .circle-left, .mask-right, .mask-left{width: 200px;height: 200px;border-radius: 100%;position: absolute;top: 0;left: 0;}.circle-right, .circle-left{background: skyblue;}.mask-right, .mask-left{background: #ccc;}.circle-right, .mask-right{clip: rect(0,200px,200px,100px);}.circle-left, .mask-left{clip: rect(0,100px,200px,0);}.text{width: 160px;height: 160px;line-height: 160px;text-align: center;font-size: 34px;color: deepskyblue;border-radius: 100%;background: #fff;position: absolute;top: 20px;left: 20px;}</style></head><body><div ><div ></div><!--100%是显示百分数，动态显示由0~100--><div >100%</div> </div><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">$(function(){//获取百分比值var num = parseInt($(.text).html());//通过计时器来显示过渡的百分比进度var temp = 0;var timer = setInterval(function(){calculate(temp);//清除计时器结束该方法调用if(temp == num){clearInterval(timer);}temp ;},30)//改变页面显示百分比function calculate(value){//改变页面显示的值$(.text).html(value %);//清除上次调用该方法残留的效果$(.circle-left).remove();$(.mask-right).remove();//当百分比小于等于50if(value <= 50){var html = ;html = <div style="transform:rotate( (value * 3.6) deg)"></div>;//元素里添加子元素$(.circle-right).append(html);}else{value -= 50;var html = ;html = <div >;html = <div style="transform:rotate( (value * 3.6) deg)"></div>;html = </div>;//元素后添加元素$(.circle-right).after(html);}}})</script></body></html>
4.拆分法：把一个含有css和js（JavaScript）的html，拆掉三个文件，一个叫cirbar1.html,另外的叫：cirbar1.css和cirbar1.js文件，放在同一个文件夹内。这是./的意思，也可以指定文件夹。
4.1 cirbar1.html的代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>圆形百分比进度条效果v2</title><!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点--><!--style type="text/css"--><link href="./cirbar1.css" rel="stylesheet" /></head><body><div ><div ></div><div >100%</div> </div><!--这个外部js文件=jquery.min.js，不能少，否则不能动了--><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script> <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多--><!--script type="text/javascript"--><script src="./cirbar1.js"></script></body></html>
4.2 cirbar1.css的代码：
*{margin: 0;padding: 0;}.bg{width: 200px;height: 200px;border-radius: 100%;background: #ccc;position: relative;margin: 20px auto;}.circle-right, .circle-left, .mask-right, .mask-left{width: 200px;height: 200px;border-radius: 100%;position: absolute;top: 0;left: 0;}.circle-right, .circle-left{background: skyblue;}.mask-right, .mask-left{background: #ccc;}.circle-right, .mask-right{clip: rect(0,200px,200px,100px);}.circle-left, .mask-left{clip: rect(0,100px,200px,0);}.text{width: 160px;height: 160px;line-height: 160px;text-align: center;font-size: 34px;color: deepskyblue;border-radius: 100%;background: #fff;position: absolute;top: 20px;left: 20px;}
4.3 cirbar1.js的代码：
$(function(){//获取百分比值var num = parseInt($(.text).html());//通过计时器来显示过渡的百分比进度var temp = 0;var timer = setInterval(function(){calculate(temp);//清除计时器结束该方法调用if(temp == num){clearInterval(timer);}temp ;},30)//改变页面显示百分比function calculate(value){//改变页面显示的值$(.text).html(value %);//清除上次调用该方法残留的效果$(.circle-left).remove();$(.mask-right).remove();//当百分比小于等于50if(value <= 50){var html = ;html = <div style="transform:rotate( (value * 3.6) deg)"></div>;//元素里添加子元素$(.circle-right).append(html);}else{value -= 50;var html = ;html = <div >;html = <div style="transform:rotate( (value * 3.6) deg)"></div>;html = </div>;//元素后添加元素$(.circle-right).after(html);}}})
==============================
再来一个，不用外部js文件的圆形进度条
顺带回顾一下相关知识。
==============================
5.效果图
6.三个文件，放在同一个文件夹中
6.1 cirbar.html代码：
<!--第1步---声明html5--><!DOCTYPE html> <!--第2步---html大框架--><html lang="en"><!--第2-1步---head部分--><head> <!--第2-1-1步---meta部分：声明字符编码格式：utf-8--> <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*--> <meta charset="utf-8" /> <!--第2-1-2步---标题名称--> <title>圆形进度条v1</title> <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下--> <!--第2-1-3步---导入css文件--> <link href="./cirbar.css" rel="stylesheet" /></head><!--第2-2步---body部分--><body> <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置--> <canvas id="canvas" width="400" height="400"></canvas> <!--第2-2-2步---导入js文件部分--> <script src="./cirbar.js"></script><!--注意收尾--></body><!--注意收尾--></html>
6.2 cirbar.css代码：
.canvas { /*画布的背景颜色设置为：黑色*/ background:#303030; }
6.3 cirbar.js代码：
window.onload = function () { var canvas = document.getElementById(canvas), //获取canvas元素 context = canvas.getContext(2d), //获取画图环境，指明为2d centerX = canvas.width / 2, //Canvas中心点x轴坐标 centerY = canvas.height / 2, //Canvas中心点y轴坐标 rad = Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度 speed = 0.1; //加载的快慢就靠它了 //绘制红色外圈 function blueCircle(n) { context.save(); context.strokeStyle = "#1E90FF"; //随百分数转动的外圈的颜色为蓝色 context.lineWidth = 3; //设置线宽 context.beginPath(); //路径开始 //注意-为顺时针， 为逆时针 //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针) //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false); context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false); context.stroke(); //绘制 context.closePath(); //路径结束 context.restore(); } //绘制白色外圈，初始的白色外圈 function whiteCircle() { context.save(); context.beginPath(); // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样 //context.strokeStyle = "#F8F8FF"; context.arc(centerX, centerY, 50, 0, Math.PI * 2, false); context.stroke(); context.closePath(); context.restore(); } //百分比文字绘制 function text(n) { context.save(); //save和restore可以保证样式属性只运用于该段canvas元素 context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色 context.font = "25px Arial"; //设置字体大小和字体 context.textAlign = center;//字体水平居中 context.textBaseline = middle;//字体垂直居中 //绘制字体，并且指定位置 context.strokeText(n.toFixed(0) "%", centerX, centerY); context.stroke(); //执行绘制 context.restore(); } //循环获取 (function drawFrame() { window.requestAnimationFrame(drawFrame, 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 =，一个没有，且只有$和小括号，因为外部的就是文件定义了一部分功能。
Copyright © 2024 有趣生活 All Rights Reserve吉ICP备19000289号-5 TXT地图HTML地图XML地图
