ドゥアイネットのプログラマー、湯川が開発日記を綴ります。

CALENDAR
S M T W T F S
1234567
891011121314
15161718192021
22232425262728
293031    
<< December 2019 >>
ARCHIVES
CATEGORIES
<< iPadセミナー | main | プログラムの共通化 >>
残り時間表示
 残り時間表示

残り時間の表示を作成しました。
メーターのようにしたいので、まずは
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になったときの処理
  }
);
使用してみたところ、イメージどおりの動きになりました。
バーの動きがスムーズです。

画像

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

| jquery mobile | 09:18 | comments(0) | - |
コメント
コメントする