양식 입력 및 슬라이더를 사용하여 개체의 회전/회전 구현
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>
<양식>
<입력 유형="범위" 클래스="양식-범위 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>
제공하신 코드 조각은 거의 정확하지만 JavaScript 코드의 마지막 줄에 몇 가지 문제가 있습니다. 수정된 버전과 설명은 다음과 같습니다.
으아악설명:
1.
rotatePerson
函数使用getElementById
选择了具有 ID 为 "person" 的元素,并将其赋值给变量person
.2. 다음으로
getElementById
和访问value
속성을 사용하여 ID가 "thetaRange"인 요소에서 각도 값을 가져옵니다. 이 값은 슬라이더에서 현재 선택된 각도를 나타냅니다.3. 마지막으로 코드는
person
元素的style.transform
属性设置为rotate(" + angle + "deg)
。这将动态地将旋转应用于person
元素,使用从滑块获取的度数值angle
이 됩니다.슬라이더 값이 변경될 때
rotatePerson
함수를 호출하면 선택한 각도에 따라 문자 요소가 회전됩니다.