<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="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>
1
830
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
您提供的代码片段几乎正确，但是在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函数，人物元素将根据所选的角度进行旋转。