jQuery 圆形统计插件circliful2--圆环每次不从0开始 

<!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);
	// });
}

 

posted @ 2018-11-16 18:51  格鲁特baby  阅读(65)  评论(0)  编辑  收藏  举报