フォーム入力とスライダーを使用してオブジェクトの回転/回転を実装します。

Question

#person というオブジェクトがあり、スライダーの入力を使用してそれを -180 度から 180 度まで回転する必要があります。スライダーを入力ボックスと同期して現在の角度値を表示し、関数を作成しようとしましたが、機能しませんでした。 style.transformを使用しようとしています。私のプロジェクトでは Bootstrap と jQueryUI を使用していたので、問題を解決するために標準の JavaScript の代わりにこれら 2 つのフレームワークを使用できれば便利です。

HTML

<label for="angleSlider" class="form-label">回転角度</label>
    <フォーム>
        <input type="range" class="form-range w-75" id="thetaRange" min="-180" max="180" value="0";
        oninput="this.form.thetaInput.value=this.value" />
        <入力タイプ = "数値" id = "thetaInput" 最小 = "-180" 最大 = "180" 値 = "0"
        oninput="this.form.thetaRange.value=this.value" />
    </form>

JavaScript

関数回転人物() {
        const person = document.getElementById("person");
        var angle = document.getElementById("thetaRange");
        person.style.transform = "回転(角度度)"
    }

Answer 1

提供されたコード スニペットはほぼ正しいですが、JavaScript コードの最後の行にいくつかの問題があります。修正版とその説明は次のとおりです:

リーリー ＃＃＃＃＃＃説明する：＃＃＃＃＃＃

1.

rotateperson

この関数は、getElementById を使用して ID「person」を持つ要素を選択し、それを変数 person## に割り当てます。 ＃。 2. 次に、getElementById

を使用して

value プロパティにアクセスし、ID「thetaRange」の要素から角度の値を取得します。この値は、スライダーで現在選択されている角度を表します。 3. 最後に、コードは person

要素の

style.transform 属性を rotate(" angle "deg)## に設定します。 ＃。これにより、スライダーから取得した度値 angle を使用して、person 要素に回転が動的に適用されます。 スライダー値が変更されたときに rotateperson 関数を呼び出すと、選択した角度に従って人物要素が回転します。