jQuery 圓形統計外掛circliful2--圓環每次不從0開始
阿新 • • 發佈：2018-11-22
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>circliful</title> <link rel="stylesheet" href="link/jquery.circliful.css"> </head> <body> <div class="stat-div"> <div id="stat-one" data-dimension="160" data-text="0%" data-info="正在匯入..." data-width="8" data-fontsize="38" data-percent="0" data-fgcolor="#02FF9A" data-bgcolor="#3C4247" style="margin: 30px auto;"></div> </div> </div> </body> <script type="text/javascript" src="link/jquery.min.js"></script> <script type="text/javascript" src="link/jquery.circliful.js"></script> <script type="text/javascript"> $('#stat-one').circliful(); var statId = $('#stat-one').attr('id'); var idNum = 0; setInterval(function () { idNum+=1; var statHtml = '<div id="'+ statId+idNum +'" data-dimension="160" data-text="'+idNum+'%' +'" data-info="正在匯入..."'+ 'data-width="8" data-fontsize="38" data-percent="'+ idNum +'" data-fgcolor="#02FF9A"'+ 'data-bgcolor="#3C4247" style="margin: 30px auto;"></div>'; $('.stat-div').html(statHtml); $('#'+statId+idNum).circliful(); if (idNum >= 100) { idNum = 0; } },2000); </script> </html>
if (curPerc < endPercent) {
curPerc += curStep;
// 將requestAnimationFrame註釋掉，為了使圓環每次都不從0開始
// requestAnimationFrame(function () {
animate(Math.min(curPerc, endPercent) / 100);
// });
}