Question

有什么方法可以让进度条倒退吗？我看到一个例子告诉我将进度条旋转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);
});

JSFiddle

Answer 1

只需从progress.val开始，然后减去它。当它达到0时，你就完成了。

Answer 2

第一： - 我们将为reverse

创建一个新功能

第二： - 将min="0"属性添加到进度条

第三： - 在运行progress.val('200');

之前，将进度值更改为200 setTimeout()

最后： - 在+

上将-更改为progress.val() - interval

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何创建一个与计时器配合使用的交互式后向进度条？

2 个答案: