Javascript 使用jQuery在设定的时间内更改值？

我正在做一个需要循环进度条的项目。我在这里找到了一个可以做到这一点的：

但我需要做的是在页面加载时对其设置动画，以便每次加载时其值都会上升：

<div class="progress-pie-chart" data-percent="43">

所以在“page1.htm”中，我需要数据百分比值从0-20自动递增。在20-33等的“page2.htm”中，我对jQuery还很陌生，所以我真的不知道从哪里开始

---

如何创建一个函数，使数据百分比值在500毫秒内增加？

使用

setInterval

我们可以生成类似的结果。我们还使用一些数学计算基于fps的步骤来创建平滑动画。小数也可用于百分比

var start=0；
var-end=30；
var时间=800//在ms中
var fps=30；
var增量=（（结束/开始）/时间）*fps；
$（'.progress饼图'）[0].dataset.percent=start；
var timer=setInterval（函数（）{
$（'.progress饼图'）[0]。dataset.percent=parseFloat（$（'.progress饼图'）[0]。dataset.percent）+增量；
if（parseFloat（$（'.progress饼图'）[0].dataset.percent）>=end）{
清除间隔（计时器）；
}
变量$ppc=$（“.进度饼图”），
percent=parseFloat（$ppc[0].dataset.percent），
度=360*百分比/100；
如果（百分比>50）{
$ppc.addClass（'gt-50'）；
}
$（'.ppc progress fill'）.css（'transform'，'rotate（'+deg+'deg'））；
$（'.ppc percents span'）.html（parseInt（percent，10）+'%'）；
}，fps）
。进度饼图{
宽度：200px；
高度：200px；
边界半径：50%；
背景色：#E5；
位置：相对位置；
}
.progress-pie-chart.gt-50{
背景色：#81CE97；
}
.ppc进展{
内容：“；
位置：绝对位置；
边界半径：50%；
左：计算（50%-100px）；
顶部：calc（50%-100px）；
宽度：200px；
高度：200px；
剪辑：rect（0，200px，200px，100px）；
}
.ppc进度。ppc进度填写{
内容：“；
位置：绝对位置；
边界半径：50%；
左：计算（50%-100px）；
顶部：calc（50%-100px）；
宽度：200px；
高度：200px；
剪辑：rect（0，100px，200px，0）；
背景：#81CE97；
变换：旋转（60度）；
}
.gt-50.ppc进度{
剪辑：rect（0，100px，200px，0）；
}
.gt-50。ppc进度。ppc进度填充{
剪辑：rect（0，200px，200px，100px）；
背景：#e5；
}
.ppc百分比{
内容：“；
位置：绝对位置；
边界半径：50%；
左：计算值（50%-173.91304px/2）；
顶部：calc（50%-173.91304px/2）；
宽度：173.91304px；
高度：173.91304px；
背景：#fff；
文本对齐：居中；
显示：表格；
}
.ppc百分跨度{
显示：块；
字号：2.6em；
字体大小：粗体；
颜色：#81CE97；
}
.pcc百分比包装器{
显示：表格单元格；
垂直对齐：中间对齐；
}
身体{
字体系列：Arial；
背景：#f7f7f7；
}
.进度饼图{
保证金：50px自动0；
}

%
您想按时间增加还是根据页面增加？是单页应用程序还是单独请求的页面？目前它们是单独的页面，因此vihan1086的答案非常有效。