如何制作可与计时器配合使用的交互式向后进度栏？

Question

Is there any way that I could be able to make a progress bar go backwards? I have seen an example that told me to turn the progress bar 180 degrees, but that seems like a very dirty way to do it. What I'm looking for is so the progress bar can be time controlled, and so that a by pressing a button, I would add three seconds to the timer, thus pulling back the bar a bit (Say the timer is at 7 seconds, pressing the button would add a second, bringing it to 8 seconds thus pulling back the timer a little bit). If I could incorporate this with a countdown timer as well, it would be cool, but not 100% needed. Here is what I have so far. Changes that need to be made is so that the timer goes backwards instead of forwards, and so I could be able to add time on to it by pressing a button.

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);
});

JSFiddle

Answer 1

Simply start with progress.val at its maximum, and decrement it. When it gets to 0, you're done.

Answer 2

1st: - We will create a new function for reverse

2nd: - Add min="0" attribute to the progress bar

3rd: - change progress value to 200 progress.val('200'); before running the setTimeout()

Finally: - change + to - on progress.val() - interval

 $(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')); } }, reverse = function(){ progress.val(progress.val() - interval); $('#val').text(progress.val()); if ( progress.val() - interval > progress.attr('min')){ setTimeout(reverse, updatesPerSecond); } else { $('#val').text('Done'); progress.val(progress.attr('min')); } } progress.val('200'); setTimeout(reverse, updatesPerSecond); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <progress max="200" min="0" value="1"></progress> <div id="val"></div>