양식 입력 및 슬라이더를 사용하여 개체의 회전/회전 구현
P粉007288593
P粉007288593 2023-08-16 16:16:28
0
1
507
<p>#person이라는 개체가 있는데 슬라이더를 입력하여 -180도에서 180도까지 회전해야 합니다. 현재 각도 값을 표시하기 위해 슬라이더를 입력 상자와 동기화하고 함수 작성을 시도했지만 작동하지 않았습니다. style.transform을 사용하려고 합니다. 내 프로젝트에서 Bootstrap과 jQueryUI를 사용한 적이 있으므로 문제를 해결하기 위해 표준 JavaScript 대신 이 두 프레임워크를 사용할 수 있다면 도움이 될 것입니다. </p> <pre class="brush:php;toolbar:false;">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 = "회전(각도)" }</pre></p>
P粉007288593
P粉007288593

모든 응답(1)
P粉882357979

제공하신 코드 조각은 거의 정확하지만 JavaScript 코드의 마지막 줄에 몇 가지 문제가 있습니다. 수정된 버전과 설명은 다음과 같습니다.

으아악

설명:

1. rotatePerson 函数使用 getElementById 选择了具有 ID 为 "person" 的元素,并将其赋值给变量 person.

2. 다음으로 getElementById 和访问 value 속성을 사용하여 ID가 ​​"thetaRange"인 요소에서 각도 값을 가져옵니다. 이 값은 슬라이더에서 현재 선택된 각도를 나타냅니다.

3. 마지막으로 코드는 person 元素的 style.transform 属性设置为 rotate(" + angle + "deg)。这将动态地将旋转应用于 person 元素,使用从滑块获取的度数值 angle이 됩니다.

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

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿