我有一个名为#person的对象,我需要通过滑块输入将其从-180度旋转到180度。我有滑块与输入框同步工作,以显示当前的Angular 值和一个函数,我试图写,但它不工作。我正在尝试使用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)"
}
3条答案
按热度按时间fzsnzjdm1#
考虑下面的jQuery示例。
这将根据
input
事件上的Range Input的值旋转元素。xzabzqsa2#
您的想法是正确的,但您需要做一些更改才能使其成为有效的JavaScript。
(尽管将问题标记为jQuery,但您没有在问题中使用jQuery,因此我不会在答案中使用jQuery。
您的代码
"rotate(angle deg)"
将transform
属性设置为字面上的单词“angle”,而不是包含您想要的Angular 编号。要包含Angular 数,您可以使用JavaScript的字符串插值功能,该功能将文本与变量值组合在一起:rotate(${angle}deg)
注意反引号```的使用,它激活了字符串插值特性。您可以在MDN上的指南中阅读有关此功能的更多信息:文本或Template literals中的表达式。此外,您需要使用
.value
来访问输入或滑块对象的数值。我用const angle = thetaRange.value
来做这个。您可以看到更多在MDN上访问输入值的示例,例如在的参考页面上。最后,您需要添加事件侦听器,以便在文本输入或滑块更改时触发
rotatePerson
函数。如果你还没有这些,你可以用下面的代码添加它们:把它们放在一起:
^单击运行代码片段以查看它的实际效果!
(欢迎来到Stack Overflow!别忘了对任何对你有用的答案投赞成票和/或标记为接受。
kuarbcqp3#
您提供的代码片段几乎是正确的,但在JavaScript代码的最后一行中存在一些问题。以下是更正后的版本和解释:
说明:
1.
rotatePerson
函数使用getElementById
选择ID为“person”的元素,并将其分配给person
变量。**2.**接下来,使用
getElementById
并访问value
属性,从ID为thetaRange的元素中获取Angular 的值。此值表示滑块上选定的当前Angular 。**3.**最后,代码将
person
元素的style.transform
属性设置为rotate(" + angle + "deg)
。这将使用从滑块获得的angle
值(以度为单位)动态地将旋转应用于person
元素。通过在滑块值发生变化时调用
rotatePerson
函数,person元素将根据所选Angular 旋转。