양식 입력 및 슬라이더를 사용하여 개체의 회전/회전 구현

Question

#person이라는 개체가 있는데 슬라이더를 입력하여 -180도에서 180도까지 회전해야 합니다. 현재 각도 값을 표시하기 위해 슬라이더를 입력 상자와 동기화하고 함수 작성을 시도했지만 작동하지 않았습니다. style.transform을 사용하려고 합니다. 내 프로젝트에서 Bootstrap과 jQueryUI를 사용한 적이 있으므로 문제를 해결하기 위해 표준 JavaScript 대신 이 두 프레임워크를 사용할 수 있다면 도움이 될 것입니다.

HTML

<label for="angleSlider" class="form-label">회전 각도</label>
    <양식>
        <입력 유형="범위" 클래스="양식-범위 w-75" id="thetaRange" min="-180" 값="0"
        oninput="this.form.thetaInput.value=this.value" />
        <입력 유형="숫자" id="thetaInput" min="-180" max="180" 값="0"
        oninput="this.form.thetaRange.value=this.value" />
    
<pre class="brush:php;toolbar:false;">자바스크립트

함수 회전Person() {
        const person = document.getElementById("사람");
        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)。这将动态地将旋转应用于 person 元素，使用从滑块获取的度数值 angle이 됩니다.

슬라이더 값이 변경될 때 rotatePerson 함수를 호출하면 선택한 각도에 따라 문자 요소가 회전됩니다.