2

私は次のようなものがあるHTML5でこのようなことをしたいと思います:ここに画像の説明を入力

[開始] ボタンをクリックすると、目盛りが徐々に次の目盛りに移動し、1 秒ごとに 1 ずつ増加し、停止をクリックすると動作が停止し、もう一度開始をクリックすると現在の場所から再開できるようにしたいと考えています。 . 上部のボックスには、赤いトラッカー バーに対応する秒数が表示されます。ユーザーが目盛りの数を指定できると仮定します (つまり、20 秒/目盛り幅または 10 秒/目盛り幅)。

JQuery UI Slider http://jqueryui.com/demos/slider/を見たことがありますが、それには目盛りがなく、私が説明したことを実行するための最善の方法であるかどうか、またはより良い方法があるかどうかはわかりません。

これを行うための最良のjavascript、jquery、htmlアプローチは何ですか?

4

1 に答える 1

1

これを試してみてください - エクササイズをしたい気分になりました!

http://jsfiddle.net/zBKJk/

唯一の奇妙な点は、下部の目盛りが の異なる値と正確に一致しないことですTICKS_ON_BAR。おそらくマイナーな CSS/数学の問題です。

これらの変数を変更できます

var TICKS_ON_BAR = 10; // Number of seconds to show on the bar
var TICK_RATE_MS = 100; // Interval to tick at (in milliseconds)

便利なコールバック関数も追加

function timerComplete(){
    // Do something further when the timer hits the end of the bar
}

編集 :これをスムーズに実行したい場合は、間隔を短くするか、(HTML5 を指定したため) 線形 CSS3 トランジションを使用して変更をアニメーション化することができます。

http://jsfiddle.net/zBKJk/1/ (少し不具合があります。w3schools のサンプル css をダンプしました)

これをそのまま jQuery でアニメーション化するのもグリッチです: http://jsfiddle.net/zBKJk/2/

于 2012-06-27T06:12:33.690 に答える