Kemarin saya merekam peristiwa mendapatkan nilai kunci keyboard. Dengan nilainya, itu tidak lebih dari melakukan operasi yang berbeda untuk nilai yang berbeda. Saya juga telah menggunakannya sebelumnya ketika menulis tentang ular serakah. Akibatnya, butuh waktu lama untuk merekamnya, jadi saya merasa perlu merekamnya. Di satu sisi, memang ada sesuatu yang baik, dan di sisi lain, saya juga mengingatkan diri sendiri bahwa fungsi yang baru saja saya sadari adalah orang asing lagi. Secara umum, itu dianggap sebagai ulasan masa lalu dan mempelajari yang baru.
Pertama -tama mari kita analisis prinsip umum penerapan operasi keyboard untuk mewujudkan gerakan div:
*--- Untuk mewujudkan pergerakan div, poin terpenting adalah untuk mendapatkan objek div
*--- Postion: Absolute menyeret div sepenuhnya keluar dari aliran dokumen. Tempat ini terlewatkan. Saya hanya menemukannya setelah kembali untuk melihat ular rakus. Itu sangat pusing.
*--- operasi mendapatkan keyboard
*--- Berikan tanggapan yang berbeda sesuai dengan operasi keyboard yang berbeda
Inilah yang saya pikir mungkin perlu diperhatikan, mari kita lihat kode terlebih dahulu:
Pertama, bagian html
<Div id = "showzone">
Kemudian catat operasi JavaScript yang sebenarnya
window.onload = function () {var obj = document.geteLementById ("showzone"); // objek telah diperoleh, ini adalah var paling sederhana a = 10; var toleft = toright = totop = tobottom = false; // tentukan beberapa variabel boolean untuk operasi arah berikutnya, dan tampaknya empat arah var bergerak = setInterval (function () {// definisi bergerak di tempat ini sebenarnya tidak ada artinya, hanya untuk membuat metode ini lebih jelas jika (toleft) { obj.style.left = parseInt (obj.offsetleft-a)+"px"; // Rasanya lebih baik untuk menulis parseint. JavaScript? // Pengatur waktu klasik ini adalah alat yang hebat untuk eksekusi loop. Apakah Anda masih ingat perbedaan antara setInterval dan setTimeout document.onkeyDown = function (event) {var event = event || window.event; sakelar (event.keycode) {// haha, dapatkan kasing keyboard case 37: toleft = true; break; // ubah variabel dan terus jalankan loop awal, sehingga Anda tidak dapat menghentikan atau menghentikan kasus 38: totop = true; break; Kasus 39: Toright = true; break; Kasus 40: Tobottom = true; break; }}; document.onkeyup = function (event) {switch (event.keycode) {case 37: toleft = false; break; // ubah saya kembali dan beri tahu Anda untuk berhenti dan tidak memindahkan case 38: totop = false; break; Kasus 39: Toright = false; break; Kasus 40: Tobottom = false; break; }}; };Dengan cara ini, kami telah menyelesaikan persyaratan dalam analisis prinsip, dan pada saat yang sama, kami dapat memindahkan tombol Div Up, Bawah, Kiri dan Kanan melalui tombol Atas, Bawah, Kiri dan Kanan. Selanjutnya, mari kita catat tempat -tempat sensitif.
1. Div harus mutlak. Itu tidak sepadan setelah berjuang dengan ini untuk waktu yang lama. Jadi saya memeriksa dan belajar tentang konsep "aliran dokumen".
Aliran dokumen biasanya dikatakan diatur dari atas ke bawah, dari kiri ke kanan, maka elemen ini adalah elemen simpul, DOM besar. Mari kita bicara tentang penjelasan lain terlebih dahulu. Yang saya sukai adalah menjelaskan ini: Dokumen + Stream. Seperti namanya, dokumen itu berarti dokumen halaman web, dan aliran adalah metode output. Beberapa penjelasan adalah metode analisis browser. Ini tampaknya lebih jelas. Aliran dokumen normal seperti pesawat, dan di mana pun Anda meletakkan elemen, di situlah tempatnya. Mengambang, posisi tetap dan penentuan posisi relatif. Di sini, menganalisis absolute adalah untuk meregenerasi aliran, dipisahkan dari label lapisan induknya, seperti z-index adalah 0 sebelumnya, dan indeks z berada di atasnya, mengambang dan atas, dan dapat dipindahkan secara acak melalui kiri dan atas.
Saya dapat memahami makna umum, tetapi saya merasa bahwa beberapa bagian tidak dapat diungkapkan secara efektif dalam bahasa, dan beberapa poin sedikit kabur. Saya percaya bahwa ketika pengalaman menumpuk, saya dapat memahaminya lebih dalam.
2. Kode keycode, huruf kecil Onkeyup dan Onkeydown juga merupakan masalah yang ditemukan setelah menguji tempat ini. Untuk JavaScript, setiap tempat kecil adalah masalah besar;
3. Break in Switch; Saya sering menemukan java ini, jadi saya tidak akan banyak bicara
Masalah umum adalah poin di atas. Apakah Anda masih ingat kunci pintasan berkomentar dan kunci pintasan lainnya? Ini memiliki masalah. Kami menanggapi itu hanya menargetkan satu kunci. Jika kita ingin menggunakan beberapa kunci pintasan, bagaimana kita harus mengaturnya?
Mari kita lihat kode:
document.onkeydown = function (event) {// Ini masih kode yang sama seperti di atas. Apakah Anda melihat bedanya? var event = event || window.event; var bctrl = event.ctrlkey; // here switch (event.keycode) {case 37: toleft = true; break; Kasus 38: if (bctrl) {obj.style.background = "yellow"; break;} totop = true; break; // di sini, kasus 39: toright = true; break; Kasus 40: Tobottom = true; break; }};Di sini saya menemukan properti lain dari objek acara, yang merupakan satu lagi kode kunci di luar, ctrlkey, atau kapitalisasi. Fungsi utamanya adalah memeriksa status kunci CTRL. Faktanya, ada dua lainnya:
Altkey dan ShiftKey adalah cek pada status tombol ALT dan tombol shift masing -masing. Dengan cara ini, Anda tahu cara mengatur kunci pintasan.
Bahkan, jika saya menulisnya sendiri, saya mungkin puas, tetapi ketika saya membaca dan mencari, saya selalu bertemu teman -teman saya yang bijaksana.
Lampirkan kode, apakah Anda tahu apa yang harus dilakukan:
Batas fungsi () {var doc = [document.documentelement.clientwidth, document.documentelement.clientHeight] // mencegah obj.offsetleft <= 0 && (<span style = "font-family: arial, helvetica, sans-serif;"> OBJ </span> <span style = "font-font-family: Arial, Arial; sans-serif; ">. style.left = 0); </span> // cegah obj.offsettop <= 0 && (obj.style.top = 0); // Cegah doc [0] di sisi kanan - obj.offsetleft - obj.offsetwidth <= 0 && (obj.style.left = doc [0] - obj.offsetWidth + "px"); // Cegah dokumen overflow bawah [1] - obj.offsettop - obj.offsetheight <= 0 && (obj.style.top = doc [1] - obj.offsetheight + "px")}Apa yang saya lampirkan di sini adalah bahwa sementara kode di internet dirancang untuk mencegah overflow, saya juga ingin memuji metode penulisan ini. Ini jauh lebih pendek dari apa yang saya tulis dengan tegas. Saya akan mencoba menulis lebih pendek di masa depan.