Javascript 如何制作一个与计时器一起工作的交互式向后进度条？

有没有办法让进度条倒退？我看过一个例子，告诉我把进度条转180度，但这似乎是一个非常肮脏的方法。我想要的是进度条可以被时间控制，这样通过按下一个按钮，我可以给计时器加上三秒，这样可以把进度条往后拉一点（假设计时器是7秒，按下按钮可以加上一秒，把它增加到8秒，这样可以把计时器往后拉一点）。如果我能把它和倒计时结合起来，它会很酷，但不是100%需要的。这是我到目前为止所拥有的。需要做的改变是让计时器向后而不是向前，这样我就可以通过按下按钮来增加时间

HTML:

Javascript:

$(document).ready(function(){
var interval = 2, //How much to increase the progressbar per frame
    updatesPerSecond = 1000/60, //Set the nr of updates per second (fps)
    progress =  $('progress'),
    animator = function(){
        progress.val(progress.val()+interval);
        $('#val').text(progress.val());
        if ( progress.val()+interval < progress.attr('max')){
           setTimeout(animator, updatesPerSecond);
        } else { 
            $('#val').text('Done');
            progress.val(progress.attr('max'));
        }
    }

setTimeout(animator, updatesPerSecond);
});

$（文档）.ready（函数（）{
var interval=2，//每帧要增加多少progressbar
updatesPerSecond=1000/60，//设置每秒更新的次数（fps）
进度=$（“进度”），
animator=函数（）{
progress.val（progress.val（）+间隔）；
$（'#val'）.text（progress.val（））；
if（progress.val（）+interval

---

只需从

progress.val

的最大值开始，然后将其递减即可。当它达到0时，您就完成了。

1st:-我们将为

reverse

第二：-将

min=“0”

属性添加到进度条

第三：-将进度值更改为200

progress.val（'200'）setTimeout（）之前的代码>

最后：-在

progress.val（）-interval上将
+
更改为
-


$（文档）.ready（函数（）{
var interval=2，//每帧要增加多少progressbar
updatesPerSecond=1000/60，//设置每秒更新的次数（fps）
进度=$（“进度”），
animator=函数（）{
progress.val（progress.val（）+间隔）；
$（'#val'）.text（progress.val（））；
if（progress.val（）+intervalprogress.attr（'min'））{
设置超时（反向，更新秒）；
}否则{
$（'val'）.text（'Done'）；
progress.val（progress.attr（'min'））；
}
}
进步值（'200'）；
设置超时（反向，更新秒）；
});