javascript - 如何制作带有刻度标记html5的“播放”滑块？

Question

我想在 HTML5 中做这样的事情，我有类似的东西：在此处输入图像描述

我希望能够做到这一点，以便当我单击“开始”按钮时，刻度线逐渐移动到下一个刻度并以每秒 1 的速度递增，单击“停止”会停止该行为，然后再次单击“开始”会从当前位置恢复. 顶部的框仅显示与红色跟踪栏对应的秒数。假设用户可以指定刻度线的数量（即可以是 20 秒/刻度线宽或 10 秒/刻度线宽）。

我已经看到了 JQuery UI Slider http://jqueryui.com/demos/slider/虽然它没有标记并且我不确定它是否真的是做我所描述的事情的最佳方法，或者是否有更好的方法。

这样做的最佳 javascript、jquery、html 方法是什么？

score 1 · Accepted Answer

试试这个——我想锻炼一下！

唯一的怪癖是底部的刻度与不同的值不完全对齐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/

1 回答 1