在时间线上绘制点的公式

Formula for plotting points on a timeline

本文关键字：绘制 时间线      更新时间：2023-09-26

我用javascript创建了一个应用程序，用户单击一个按钮启动计时器，按下一系列按钮，然后单击另一个按钮停止计时器。单击每个按钮的时间以毫秒为单位进行记录，并将值收集在一个数组中。这一切都很顺利。

下一部分是我遇到麻烦的地方。我想在时间轴中显示数组的值。我有一个脚本，它可以获得设置为100%宽的div的宽度。该宽度根据用户正在使用的设备的分辨率而不同。我需要做的是创建一个公式，根据div的宽度将存储在数组中的毫秒值缩放为适当的值。

For reference:
//Here's my array:
counterbArray = counterbString.split(", ");
counterbArrayL = [counterbArray.length];
//Getting width of div:
var timelinewidth = $("#timeline").width();
//Plotting the points as images:
for (i=1; i<(counterbArrayL); i++)
    {
    document.getElementById('timeline').innerHTML =     document.getElementById('timeline').innerHTML + "<img src='event.gif' width='16' height='15' class='plot' style='left:" + *each value from formula here* + "px' >";         
    }

谢谢！

您还需要包含用户单击停止时间的变量。

var timeofstop = *****;
counterbArray = counterbString.split(", ");
counterbArrayL = [counterbArray.length];
//Getting width of div:
var timelinewidth = $("#timeline").width();
var currentleft;
//Plotting the points as images:
for (var i = 0; i < counterbArrayL; i++) {
    currentleft = Math.round((counterbArray[i] / timeofstop) * timelinewidth);
    document.getElementById('timeline').innerHTML = document.getElementById('timeline').innerHTML + "<img src='event.gif' width='16' height='15' class='plot' style='left:" + currentleft + "px' >";
}

如果您想使图像居中，您可能还想从currentleft中减去8。

相关文章：