我正在尝试使用 jQuery 和 javascript 构建进度条。
它基本上是一个酒吧
<div id="progressbar"><div id="progress"></div>
<div id="number">0%</div>
当您单击下一步按钮(此处不存在)时,它会更改进度 div 的宽度并使用 css3 将其动画化,但我的问题在于数字。我有 5 个屏幕,所以它们每个都是 20%,我想为数字设置动画,所以当条形变宽时,数字在条形动画(0.5 秒)的同时从 0% 到 20% 的所有数字闪烁
我知道使用 JQuery,您可以只使用 innerHTML 命令并将其从 0% 更改为 20%,但我想为其设置动画。
知道怎么做吗?
最佳答案
首先获取 jQuery 进度条插件。 这是一个 example .
然后创建一个像这样的函数:
num = 0;
function pbUpdate(value){
if (num <= value) {
window.setInterval('updAnimation(' + value + ')', 10);
}else{
clearTimeout;
}
}
function updAnimation(value){
num += 1;
if (num <= value){
$("#pb").reportprogress(num);
}
}
如果您查看插件的示例并查看这段代码,您应该可以到达您想去的地方。我也用过这段代码。
关于Javascript 进度动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3454034/