残り時間表示

残り時間の表示を作成しました。
メーターのようにしたいので、まずは
jqueryの「progressbar」を使用してみました。


$("#progressbar").progressbar();
  var value = 100;
  var timer = setInterval(function(){
      if(value == 0) {
          clearInterval(timer);
          value = 0;
      } else {
          value = value - 0.5;
      }

      // プログレスバーの値を変更
      $("#progressbar").progressbar("option", "value", value);
  }, 100
);

プログレスバーのvalueの最大値が100と決められているようなので、
引いていく値を0.5にしてインターバルを0.1秒にしてみました。


ですが、なんか動きがスムーズではありませんでした。
うまく調整すればいいのかもしれませんが、別の方法が良さそうです。

次は「animate」を試してみました。

<div style="width:100%;height:20px;border: 1px solid #666666;">
  <div id="timebar" style="width:100%;height:20px;background-color:#9cc900;"></div>
</div>

$("#timebar").animate(
  {width:"0px"},
  10000,"linear",
  function(){
    //0になったときの処理
  }
);
使用してみたところ、イメージどおりの動きになりました。
バーの動きがスムーズです。



まだちょっと地味ですけどスタイルを変えたり、
残り時間に応じてバーの色を変えたりできたらいいかなと思います。