其實需求是這麼乙個基於日期的環形進度條，開始用css3寫了一下感覺太麻煩了，於是抽了點時間用svg畫了乙個。
不多說 上**：
css：
html：
70js：
//獲取當前時間設定為開始時間，年月日var startdate = new date(), startyear = 2016, startmonth = 1, startday = 2;
// var startdate = new date(), startyear = startdate.getfullyear(), startmonth = startdate.getmonth() + 1, startday = startdate.getdate();
//設定結束時間，年月日（結束時間為6月30日）
var enddate = new date(), endyear = 2016, endmonth = 6, endday = 30;
// var enddate = new date(), endyear = enddate.getfullyear(), endmonth = 6, endday = 30;
var minstarttime=startyear + '-1-1';//設定最小時間
minstarttime = minstarttime.replace(/-/g, '/');
minstarttime = new date(minstarttime);
var starttime = startyear + '-' + startmonth + '-' + startday;
starttime = starttime.replace(/-/g, '/');
starttime = new date(starttime);
var endtime = endyear + '-' + endmonth + '-' + endday;
endtime = endtime.replace(/-/g, "/");
endtime = new date(endtime);
// 一天有多少毫秒
var dofms = (24 * 60 * 60 * 1000);
// time1 距離起始日期多少天
var diff1 = (starttime.gettime() );
// time2 距離起始日期多少天
var diff2 = (endtime.gettime() );
var diff3 = (minstarttime.gettime() );
// 計算差值
var maxdiffday=parseint(diff2 - diff3) / dofms;
var diffday = parseint(diff2 - diff1) / dofms;
diffday = diffday>0 ? diffday : startyear-1+"年度年報徵集已於6月30日結束";
$("#t").html(diffday)
var r=130, range = diffday ;
draw(range,r,maxdiffday)
});function draw(range,r,maxdiffday)
}
SVG環形進度條
svg scalabe vetor graphics 可縮放向量圖作技術，發源自xml家族。其優秀方便的圖形表現形式，讓其被當下各大瀏覽器所支援。由於其中可內嵌於html，表現出像dom自身元素一樣的性質，而被廣泛的用於html中的圖形表現。今天我作為乙個小白，根據最近的專案經驗和大家分享乙個用sv...
svg 實現半環形進度條
path元素用來定義形狀的通用元素。下面的命令可用於路徑資料 注釋 以上所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位。例如 畫個圓環 解析 symbol元素用來定義乙個圖形模板物件，它可以用乙個元素例項化。symbol元素對圖形的作用是在同一文件中多次使用，新增結構和語義。結構豐富的文...
環形進度條
在專案中做廣告頁，需要乙個5s倒計時的進度條。就用了calayer寫了乙個簡單的進度條。直接上 import inte ce circularprogressview uiview void start void stop import circularprogressview.h import i...