フォーム入力とスライダーを使用してオブジェクトの回転/回転を実装します。
P粉007288593
2023-08-16 16:16:28
<p>#person というオブジェクトがあり、スライダーの入力を使用してそれを -180 度から 180 度まで回転する必要があります。スライダーを入力ボックスと同期して現在の角度値を表示し、関数を作成しようとしましたが、機能しませんでした。 style.transformを使用しようとしています。私のプロジェクトでは Bootstrap と jQueryUI を使用していたので、問題を解決するために標準の JavaScript の代わりにこれら 2 つのフレームワークを使用できれば便利です。 </p>
<pre class="brush:php;toolbar:false;">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></pre>
<pre class="brush:php;toolbar:false;">JavaScript
関数回転人物() {
const person = document.getElementById("person");
var angle = document.getElementById("thetaRange");
person.style.transform = "回転(角度度)"
}</pre></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
提供されたコード スニペットはほぼ正しいですが、JavaScript コードの最後の行にいくつかの問題があります。修正版とその説明は次のとおりです:
リーリー ＃＃＃＃＃＃説明する：＃＃＃＃＃＃1.
rotatepersonこの関数は、getElementById を使用して ID「person」を持つ要素を選択し、それを変数
を使用してperson## に割り当てます。 ＃。2.次に、getElementByIdvalue プロパティにアクセスし、ID「thetaRange」の要素から角度の値を取得します。この値は、スライダーで現在選択されている角度を表します。
要素の3.最後に、コードはpersonstyle.transform 属性を rotate(" angle "deg)## に設定します。 ＃。これにより、スライダーから取得した度値
angleを使用して、person要素に回転が動的に適用されます。rotateperson関数を呼び出すと、選択した角度に従って人物要素が回転します。