基于svg的环形进度条

其实需求是这么一个基于日期的环形进度条，开始用css3写了一下感觉太麻烦了，于是抽了点时间用svg画了一个。

不多说 上代码：

css：

<style>
 circle {
  -webkit-transition: stroke-dasharray .25s;
  transition: stroke-dasharray .25s;
 }
</style>

html：

<div id="div1" style="150px;height:150px;position: relative;">
 <svg width="150" height="150" viewbox="0 0 300 300">
  <circle cx="150" cy="150" r="130" stroke-width="20" stroke="#f2f2f2" fill="none"></circle>
  <circle cx="150" cy="150" r="130" stroke-width="20" stroke="#4d91ee" fill="none" transform="matrix(0,-1,1,0,0,300)"></circle>
 </svg>
 <span id="t" style="color:#4d91ee;position: absolute; top: 50%;left:50%;">70</span>
</div>

js：

  //获取当前时间设置为开始时间，年月日
  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) {
  var circle = document.querySelectorAll("circle")[1];//获取svg中的circle
  if (circle) {
   var percent = range / MaxdiffDay, perimeter = Math.PI * 2 * r;
   circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1- percent));
  }
 }