javascript - 如何制作带有刻度标记 html5 的 "playback" slider ？

Question

我想在 HTML5 中做这样的事情，我有这样的东西:

我希望能够做到这一点，当我点击“开始”按钮时，刻度标记逐渐移动到下一个刻度并每秒递增 1，点击“停止”停止行为，再次点击“开始”从当前位置。顶部的框仅显示对应于红色跟踪条的秒数。假设用户可以指定刻度线的数量(即可以是 20 秒/刻度线宽 ro 10 秒/刻度线宽)。

我看过 JQuery UI Slider http://jqueryui.com/demos/slider/尽管它没有标记，但我不确定它是否真的是执行我所描述的最佳方法，或者是否有更好的方法。

执行此操作的最佳 javascript、jquery、html 方法是什么？

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