Javascript计时器进度条

我有定时器功能，带有进度条。它工作得很好，但我想制作一个平滑的进度条动画，每秒60帧

function started(duration) {
    var TotalSeconds = 40;
    var documentWidth = $(document).width();
    var start = Date.now();
    var intervalSetted = null;

    function timer() {
        var diff = duration - (((Date.now() - start) / 1000) | 0);
        var seconds = (diff % 60) | 0;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        $('#timer').html("00:" + seconds);
        var progresBarWidth = (seconds * documentWidth / TotalSeconds);

        $('#progress').css({
            width: progresBarWidth + 'px'
        });

        if (diff <= 0) {
            clearInterval(intervalSetted);
        }
    }

    timer();
    intervalSetted = setInterval(timer, 1000);
}

started(40);

功能已启动（持续时间）{
var TotalSeconds=40；
var documentWidth=$（document）.width（）；
var start=Date.now（）；
var intervalseted=null；
函数计时器（）{
var diff=持续时间-（（Date.now（）-start）/1000）0；
var秒数=（差异%60）| 0；
秒=秒<10？“0”+秒：秒；
$（'#timer'）.html（“00:+秒）；
var progresBarWidth=（秒*documentWidth/TotalSeconds）；
$（“#进度”）.css({
宽度：progresBarWidth+‘px’
});
if（diff在jquery中使用方法，而不是
.css（）

.animate（）方法允许我们在任何场景上创建动画效果
数值CSS属性。唯一需要的参数是的普通对象
CSS属性。此对象类似于可以发送到的对象
.css（）方法，只是属性的范围更大
限制性的

您可以使用CSS3动画。
我编写了一些示例代码，其中显示了一个progressbar，它使用您可以选择的持续时间进行倒计时。动画完成后，您还可以进行回调

CSS3动画是硬件加速的，因此使用它时，您将获得最流畅的体验


/*
*创建进度条。
*@param id要在progressbar中转换的div的id
*@param duration计时器的持续时间示例：“10s”
*@param callback，可选函数，在progressbar达到0时调用。
*/
函数createProgressbar（id、持续时间、回调）{
//我们选择要转换为progressbar的div
var progressbar=document.getElementById（id）；
progressbar.className='progressbar'；
//我们创建更改宽度以显示进度的div
var progressbarinner=document.createElement（'div'）；
progressbarinner.className='inner'；
//现在我们设置动画参数
progressbarinner.style.animationDuration=持续时间；
//最后，我收到了一封回电
if（类型（回调）=“函数”）{
progressbarinner.addEventListener（'animationend'，回调）；
}
//将progressbar附加到主progressbardiv
progressbar.appendChild（progressbarinner）；
//当一切都设置好后，我们开始动画
progressbarinner.style.animationPlayState='running'；
}
addEventListener（'load'，function（）{
createProgressbar（'progressbar1'，'40s'）；
createProgressbar（'progressbar2'，'30s'）；
createProgressbar（'progressbar3'，'20s'，function（）{
警报（'20s进度条已完成！'）；
});
createProgressbar（'progressbar4'，'10s'，function（）{
警报（'10s进度条已完成！'）；
});
})；
.progressbar{
宽度：80%；
保证金：25像素自动；
边框：实心1px#000；
}
.progressbar.内部{
高度：15px；
动画：进度条倒计时；
/*占位符，这将使用javascript更新*/
动画持续时间：40秒；
/*我们最后停下来*/
动画迭代次数：1；
/*动画完成后，保持“暂停”*/
动画填充模式：正向；
/*我们暂停启动，我们使用javascript启动动画*/
动画播放状态：暂停；
/*我们想要一个线性动画，放松是标准的*/
动画计时功能：线性；
}
@关键帧进度条倒计时{
0% {
宽度：100%；
背景：#0F0；
}
100% {
宽度：0%；
背景：#F00；
}
}


$('#progress').animate({
        width: progresBarWidth + 'px'
 }, 1000);