javascript - 根据用户选择使用 javascript 对图像进行部分着色

Question

我有这个“时间线”，它的水平是这样的

00|01|02|03|等到 23

每个包含数字的跨度为 17 个像素，“|” 线为 1 像素，整个图像为 431x20 像素。

我有 2 个标签，用户应该选择“开始”时间和“结束”时间，我想知道如何使用 javascript 为图像部分着色，我想我可以在上面放一些 CSS，例如在图像上，但我不知道如何使用 javascript 来做到这一点，任何帮助都会非常有用。

Answer 1

让我觉得将 DIV 绝对定位在图像顶部非常简单，具有相同的高度、您选择的任何颜色以及一些适当的不透明度，将其左边缘设置为（这是一个快速计算，可能是错误的）图像.left + (18 * from)，其宽度为 18 * (to - from + 1) - 1。

但是，首先让您的时间线成为图像有很好的理由吗？对我来说，拥有一组具有或不具有“选定”类的节点听起来更好，每个节点上都有一个“00”-“23”文本标记。不需要图像。