0

ユーザーがボタンをクリックしてタイマーを開始し、一連のボタンを押してから別のボタンをクリックしてタイマーを停止するアプリケーションを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' >";         
    }

ありがとう！

4

1 に答える 1

0

ユーザーが停止をクリックした時刻を含む変数も必要です。

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 を引くこともできます。

于 2012-09-07T13:03:20.727 に答える