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

最新推荐文章于 2021-05-31 05:36:38 发布

_格鲁特宝宝

最新推荐文章于 2021-05-31 05:36:38 发布

阅读量227

点赞数

分类专栏： Web FrontEnd jquery 文章标签： circliful circliful( ) 圆环插件

_格鲁特宝宝原创，转载请务必注明出处

本文链接：https://blog.csdn.net/GrootBaby/article/details/84144216

版权

Web FrontEnd 同时被 2 个专栏收录

226 篇文章 5 订阅

订阅专栏

jquery

20 篇文章 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);
	// });
}