以表單輸入和滑桿實現物件的轉動/旋轉
P粉007288593
2023-08-16 16:16:28
<p>我有一個名為#person的對象，我需要用滑桿的輸入將其從-180度旋轉到180度。我已經使滑桿與輸入框同步，以顯示當前角度值，並嘗試編寫了一個函數，但它沒有起作用。我正在嘗試使用style.transform。在專案中使用了Bootstrap和jQueryUI，如果能使用這兩個框架而不是標準的JavaScript來解決問題，也會有所幫助。 </p>
<pre class="brush:php;toolbar:false;">HTML
<label for="angleSlider" class="form-label">旋轉角度</label>
<form>
<input type="range" class="form-range w-75" id="thetaRange" min="-180" max="180" value=" value="0"
oninput="this.form.thetaInput.value=this.value" />
<input type="number" id="thetaInput" min="-180" max="180" value="0"
oninput="this.form.thetaRange.value=this.value" />
</form></pre>
<pre class="brush:php;toolbar:false;">Javascript
function rotatePerson() {
const person = document.getElementById("person");
var angle = document.getElementById("thetaRange");
person.style.transform = "rotate(angle deg)"
}</pre></p>
您提供的程式碼片段幾乎正確，但是在JavaScript程式碼的最後一行中存在一些問題。以下是已更正的版本及其解釋：
function rotatePerson() { const person = document.getElementById("person"); var angle = document.getElementById("thetaRange").value; // 获取角度的值 person.style.transform = "rotate(" + angle + "deg)"; // 将角度变量连接到transform属性中 }解釋：
1.
rotatePerson函數使用getElementById選擇了具有ID 為"person" 的元素，並將其賦值為變數person。2. 接下來，它使用
getElementById和存取value屬性從具有 ID 為 "thetaRange" 的元素中取得角度的值。該值表示滑桿上目前選擇的角度。3. 最後，程式碼將
person元素的style.transform屬性設為rotate(" angle "deg)。這將動態地將旋轉應用於person元素，使用從滑桿取得的度數值angle。透過在滑桿值更改時呼叫
rotatePerson函數，人物元素將根據所選的角度進行旋轉。