タイマーで動作する対話式の進捗バーを作成するにはどうすればよいですか？

Question

進捗バーを後退させる方法はありますか？プログレスバーを180度回転させるような例を見ましたが、それは非常に汚い方法です。私が探しているのはプログレスバーが時間制御できるので、ボタンを押すことでタイマーに3秒を追加し、バーを少し引き戻します（タイマーは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

第一： - 私たちはreverse

第二のための新しい関数を作成します： - プログレスバー

第三にmin="0"属性を追加します - setTimeout()

を実行する前に、200 progress.val('200');に進捗値を変更最後に： - 変更+〜-〜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(){ 
 
     \t 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>

Answer 2

は、単にその最大でprogress.valで開始し、そしてそれをデクリメントします。 0になると、完了です。