Question

我在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' >";         
    }

谢谢！

Answer 1

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

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' >";
}

如果您想使图像居中，您可能还想从当前左侧减去8。

在时间轴上绘制点的公式

1 个答案: