使用表单输入和滑块旋转/旋转对象

Question

我有一个名为 #person 的对象，我需要使用滑块的输入将其从 -180 度旋转到 180 度。我让滑块与输入框同步以显示当前角度值和我尝试编写的函数，但它不起作用。我正在尝试使用 style.transform。在项目中使用 bootstrap 和 jQueryUI，涉及这两个框架而不是标准 javascript 的解决方案也会有所帮助。

HTML

<label for="angleSlider" class="form-label">Rotation Angle</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>

Javascript

function rotatePerson() {
        const person = document.getElementById("person");
        var angle = document.getElementById("thetaRange");
        person.style.transform = "rotate(angle deg)"
    }

Answer 1

您提供的代码片段几乎是正确的，但 JavaScript 代码的最后一行存在一些问题。这是带有解释的更正版本：

function rotatePerson() {
    const person = document.getElementById("person");
    var angle = document.getElementById("thetaRange").value; // Get the value of the angle
    person.style.transform = "rotate(" + angle + "deg)"; // Concatenate the angle variable into the transform property
}

说明：

1.

rotatePerson

函数使用

getElementById

选择 ID 为“person”的元素，并将其分配给

person

变量。

2. 接下来，它使用

getElementById

并访问

value

属性从 ID 为“thetaRange”的元素检索角度值。该值表示滑块上当前选择的角度。

3. 最后，代码将

style.transform

元素的

person

属性设置为

rotate(" + angle + "deg)

。这使用从滑块获得的

person

度数值动态地将旋转应用于

angle

元素。

每当滑块值发生变化时，通过调用

rotatePerson

函数，人物元素将根据所选角度进行旋转。