0

こんにちは、私はこれに非常に苦労しています。

イベントリスナーでキャプチャしているz変数から値を出力しているセンサーがあります-event.zは20から100に増分します。

document.getElementById("size").style.width = event.z + "px";

これを要素の .width プロパティと関連付けると、要素の幅が比例して増加します。これはうまくいきます。ただし、反対のことをして、センサーの値が増加している間に幅を減らしたいと思います。width プロパティを減少させるためにセンサーの値を「反転」するにはどうすればよいですか?

本当にありがとう

4

1 に答える 1

2 
document.getElementById("size").style.width = 100 + (20 - event.z) + "px";

event.z が 20 の場合、幅は 100px になります。event.z が 100 の場合、幅は 20px になります。

この種の計算の一般的な関数は次のとおりです。

function progress(start, finish, current) {
    if (start == finish) { return start; }

    var operator = 1;
    var min = start;
    if (start > finish) {
        operator = -1;
        min = finish;
    }

    return start + (Math.abs(current - min) * operator);
 }

このロジックを使用すると、progress(20, 100, 30)は 30progress(100, 20, 30)を返し、ウィルは 90 を返します。基本的なロジックは、下限値と現在の値の差を初期値に加算 (または減算) することです。

開始値と終了値がわかれば、この関数は常に 1 行に圧縮できることに注意してください。コードとして使用することもできますが、1 行にする方法を理解するのに役立つ疑似コードとして意図されています。この一般的な形式を使用すると、2 つのケースは次のようになります。

20 + (current - 20) // == current、つまり元のコード行

と

100 - (現在 - 20) // == 100 - (-(20 - 現在) == 100 + (20 - 現在)、つまり私が出した答え。

于 2013-02-18T16:24:28.007 に答える