1.說明：
推薦指數：★★★★
通俗易懂，小白一看就會，高手請飄過。
學python也是需要懂一點Html、Css、JavaScript的基礎知識的。
2.效果圖1
3.代碼：保存為html，用瀏覽器打開即可。
<code>
\t
\t\t
\t\t<title>圓形百分比進度條效果/<title>
\t\t<style><br>\t\t*{<br>\t\t\tmargin: 0;<br>\t\t\tpadding: 0;<br>\t\t}<br>\t\t.bg{<br>\t\t\twidth: 200px;<br>\t\t\theight: 200px;<br>\t\t\tborder-radius: 100%;<br>\t\t\tbackground: #ccc;<br>\t\t\tposition: relative;<br>\t\t\tmargin: 20px auto;<br>\t\t}<br>\t\t.circle-right, .circle-left, .mask-right, .mask-left{<br>\t\t\twidth: 200px;<br>\t\t\theight: 200px;<br>\t\t\tborder-radius: 100%;<br>\t\t\tposition: absolute;<br>\t\t\ttop: 0;<br>\t\t\tleft: 0;<br>\t\t}<br>\t\t.circle-right, .circle-left{<br>\t\t\tbackground: skyblue;<br>\t\t}<br>\t\t.mask-right, .mask-left{<br>\t\t\tbackground: #ccc;<br>\t\t}<br>\t\t.circle-right, .mask-right{<br>\t\t\tclip: rect(0,200px,200px,100px);<br>\t\t}<br>\t\t.circle-left, .mask-left{<br>\t\t\tclip: rect(0,100px,200px,0);<br>\t\t}<br>\t\t.text{<br>\t\t\twidth: 160px;<br>\t\t\theight: 160px;<br>\t\t\tline-height: 160px;<br>\t\t\ttext-align: center;<br>\t\t\tfont-size: 34px;<br>\t\t\tcolor: deepskyblue;<br>\t\t\tborder-radius: 100%;<br>\t\t\tbackground: #fff;<br>\t\t\tposition: absolute;<br>\t\t\ttop: 20px;<br>\t\t\tleft: 20px;<br>\t\t}<br>\t\t/<style>
\t
\t
\t\t
\t\t\t
\t\t\t
\t\t\t100%
\t\t
\t\t
\t\t
\t\t\t\t
\t
/<code>
4.拆分法：把一個含有css和js（JavaScript）的html，拆掉三個文件，一個叫cirbar1.html,另外的叫：cirbar1.css和cirbar1.js文件，放在同一個文件夾內。這是./的意思，也可以指定文件夾。
4.1 cirbar1.html的代碼：
<code>
\t
\t\t
\t\t<title>圓形百分比進度條效果v2/<title>
\t\t
\t\t
\t\t<link>
\t
\t
\t\t
\t\t\t
\t\t\t
\t\t\t100%
\t\t
\t\t
\t\t
\t\t
\t\t
\t
/<code>
4.2 cirbar1.css的代碼：
<code>\t\t*{
\t\t\tmargin: 0;
\t\t\tpadding: 0;
\t\t}
\t\t.bg{
\t\t\twidth: 200px;
\t\t\theight: 200px;
\t\t\tborder-radius: 100%;
\t\t\tbackground: #ccc;
\t\t\tposition: relative;
\t\t\tmargin: 20px auto;
\t\t}
\t\t.circle-right, .circle-left, .mask-right, .mask-left{
\t\t\twidth: 200px;
\t\t\theight: 200px;
\t\t\tborder-radius: 100%;
\t\t\tposition: absolute;
\t\t\ttop: 0;
\t\t\tleft: 0;
\t\t}
\t\t.circle-right, .circle-left{
\t\t\tbackground: skyblue;
\t\t}
\t\t.mask-right, .mask-left{
\t\t\tbackground: #ccc;
\t\t}
\t\t.circle-right, .mask-right{
\t\t\tclip: rect(0,200px,200px,100px);
\t\t}
\t\t.circle-left, .mask-left{
\t\t\tclip: rect(0,100px,200px,0);
\t\t}
\t\t.text{
\t\t\twidth: 160px;
\t\t\theight: 160px;
\t\t\tline-height: 160px;
\t\t\ttext-align: center;
\t\t\tfont-size: 34px;
\t\t\tcolor: deepskyblue;
\t\t\tborder-radius: 100%;
\t\t\tbackground: #fff;
\t\t\tposition: absolute;
\t\t\ttop: 20px;
\t\t\tleft: 20px;
\t\t}/<code>4.3 cirbar1.js的代碼：
<code>\t\t\t$(function(){\t\t\t\t
\t\t\t\t//獲取百分比值
\t\t\t\tvar num = parseInt($('.text').html());
\t\t\t\t
\t\t\t\t//通過計時器來顯示過渡的百分比進度
\t\t\t\tvar temp = 0;
\t\t\t\tvar timer = setInterval(function(){
\t\t\t\t\tcalculate(temp);
\t\t\t\t\t//清除計時器結束該方法調用
\t\t\t\t\tif(temp == num){
\t\t\t\t\t\tclearInterval(timer);
\t\t\t\t\t}
\t\t\t\t\ttemp++;
\t\t\t\t},30)
\t\t\t\t//改變頁面顯示百分比
\t\t\t\tfunction calculate(value){
\t\t\t\t\t//改變頁面顯示的值
\t\t\t\t\t$('.text').html(value + '%');
\t\t\t\t\t
\t\t\t\t\t//清除上次調用該方法殘留的效果
\t\t\t\t\t$('.circle-left').remove();
\t\t\t\t\t$('.mask-right').remove();
\t\t\t\t\t
\t\t\t\t\t//當百分比小於等於50
\t\t\t\t\tif(value <= 50){
\t\t\t\t\t\tvar html = '';
\t\t\t\t\t\t
\t\t\t\t\t\thtml += '';
\t\t\t\t\t\t
\t\t\t\t\t\t//元素裡添加子元素
\t\t\t\t\t\t$('.circle-right').append(html);
\t\t\t\t\t}else{
\t\t\t\t\t\tvalue -= 50;
\t\t\t\t\t\tvar html = '';
\t\t\t\t\t\t
\t\t\t\t\t\thtml += '';
\t\t\t\t\t\thtml += '';
\t\t\t\t\t\thtml += '';
\t\t\t\t\t\t
\t\t\t\t\t\t//元素後添加元素
\t\t\t\t\t\t$('.circle-right').after(html);
\t\t\t\t\t}
\t\t\t\t}
\t\t\t})/<code>==============================
再來一個，不用外部js文件的圓形進度條
順帶回顧一下相關知識。
==============================
5.效果圖
6.三個文件，放在同一個文件夾中
6.1 cirbar.html代碼：
<code>
<title>圓形進度條v1/<title>
<link>
<canvas>
/<code>
6.2 cirbar.css代碼：
<code>.canvas {
/*畫布的背景顏色設置為：黑色*/
background:#303030;
}/<code>6.3 cirbar.js代碼：
<code>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 = "\t#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;
}
}());
}/<code>注意到6.3js文件與4.3js文件的區別了麼？一個有：window.onload =，一個沒有，且只有$和小括號，因為外部的就是文件定義了一部分功能。
分享到:
閱讀更多 易三一世 的文章
