Laksanakan putaran/putaran objek menggunakan input borang dan peluncur

Question

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.

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>

Javascript

fungsi rotatePerson() {
        const person = document.getElementById("orang");
        var angle = document.getElementById("thetaRange");
        person.style.transform = "putar(sudut deg)"
    }

Answer 1

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.