Laksanakan putaran/putaran objek menggunakan input borang dan peluncur
P粉007288593
P粉007288593 2023-08-16 16:16:28
0
1
513
<p>Saya mempunyai objek bernama #person dan saya perlu memutarkannya dari -180 darjah kepada 180 darjah dengan input peluncur. Saya telah menyegerakkan peluncur dengan kotak input untuk memaparkan nilai sudut semasa dan cuba menulis fungsi tetapi ia tidak berfungsi. Saya cuba menggunakan style.transform. Setelah menggunakan Bootstrap dan jQueryUI dalam projek saya, ia juga akan membantu jika saya boleh menggunakan kedua-dua rangka kerja ini dan bukannya JavaScript standard untuk menyelesaikan masalah. </p> <pre class="brush:php;toolbar:false;">HTML <label untuk="angleSlider" kelas="label-bentuk">sudut putaran</label> <borang> <jenis input="julat"kelas="julat bentuk w-75" oninput="this.form.thetaInput.value=this.value" <jenis input="nombor"id="thetaInput" oninput="this.form.thetaRange.value=this.value" </form></pre> <pre class="brush:php;toolbar:false;">Javascript fungsi rotatePerson() { const person = document.getElementById("orang"); var angle = document.getElementById("thetaRange"); person.style.transform = "putar(sudut deg)" }</pre></p>
P粉007288593
P粉007288593

membalas semua(1)
P粉882357979

Coretan kod yang anda berikan hampir betul, tetapi terdapat beberapa isu dalam baris terakhir kod JavaScript. Berikut ialah versi yang diperbetulkan dan penjelasannya:

function rotatePerson() {
    const person = document.getElementById("person");
    var angle = document.getElementById("thetaRange").value; // 获取角度的值
    person.style.transform = "rotate(" + angle + "deg)"; // 将角度变量连接到transform属性中
}

Penjelasan:

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

2. Seterusnya, ia mendapat nilai sudut daripada elemen dengan ID "thetaRange" menggunakan atribut getElementById 和访问 value. Nilai ini mewakili sudut yang dipilih pada masa ini pada peluncur.

3. Akhirnya, kod itu akan menjadi person 元素的 style.transform 属性设置为 rotate(" + angle + "deg)。这将动态地将旋转应用于 person 元素,使用从滑块获取的度数值 angle.

Dengan memanggil fungsi rotatePerson apabila nilai peluncur berubah, elemen aksara akan diputar mengikut sudut yang dipilih.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan