Contoh dalam artikel ini menerangkan cara melaksanakan kawalan papan kekunci pergerakan DIV menggunakan js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut: bahagian gaya css: Salin kod Kod adalah seperti berikut: <br> html,body{overflow:hidden;}<br> badan{margin:0; padding:0;}<br> pra{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;margin:12px;}<br> rentang{warna:#999;}<br> #box{position:absolute;top:50px;left:300px;width:100px;height:100px;background:red;}<br> bahagian js: Salin kod Kod adalah seperti berikut: <br> window.onload = fungsi ()<br> {<br> var oBox = document.getElementById("box");<br> var bLeft = bTop = bRight = bBottom = bCtrlKey = false; <p>setInterval(fungsi ()<br> {<br> jika (bKiri)<br> {<br> oBox.style.left = oBox.offsetLeft - 10 "px"<br> }<br> lain jika (bRight)<br> {<br> oBox.style.left = oBox.offsetLeft 10 "px"<br> }</p> <p>jika (bTop)<br> {<br> oBox.style.top = oBox.offsetTop - 10 "px" <br> }<br> lain jika(bBottom)<br> {<br> oBox.style.top = oBox.offsetTop 10 "px"<br> }<br> //Cegah limpahan<br> had();<br> },30); </p> <p>document.onkeydown = fungsi (acara)<br> {<br> var acara = peristiwa ||. window.event;<br> bCtrlKey = event.ctrlKey;</p> <p>suis (event.keyCode)<br> {<br> kes 37:<br> bKiri = benar;<br> rehat;<br> kes 38:<br> if(bCtrlKey)<br> {<br> var oldWidth = oBox.offsetWidth;<br> var oldHeight = oBox.offsetHeight;</p> <p>oBox.style.width = oBox.offsetWidth * 1.5 "px";<br> oBox.style.height = oBox.offsetHeight * 1.5 "px"; </p>oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 "px";<p> oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 "px";<br> </p>pecah; }<p> bTop = benar;<br> rehat;<br> kes 39:<br> bRight = benar;<br> rehat;<br> kes 40:<br> if(bCtrlKey)<br> {<br> var oldWidth = oBox.offsetWidth;<br> var oldHeight = oBox.offsetHeight;<br> <br>oBox.style.width = oBox.offsetWidth * 0.75 "px";</p> oBox.style.height = oBox.offsetHeight * 0.75 "px"; <p>oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 "px";<br> oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 "px";</p> <p>pecah; }<br> bBottom = benar;</p> rehat;<p> kes 49:<br> bCtrlKey && (oBox.style.background = "hijau");<br> rehat;<br> kes 50:<br> bCtrlKey && (oBox.style.background = "kuning");<br> rehat;<br> kes 51:<br> bCtrlKey && (oBox.style.background = "biru");<br> rehat;<br> }<br> <br>kembali palsu<br> };<br> </p>document.onkeyup = fungsi (acara)<p> {<br> suis ((acara || window.event).keyCode)</p> {<p> kes 37:<br> bKiri = palsu;<br> rehat;<br> kes 38:<br> bTop = palsu;<br> rehat;<br> kes 39:<br> bRight = palsu;<br> rehat;<br> kes 40:<br> bBottom = palsu;<br> rehat;<br> }<br> };<br> <br>//Cegah limpahan<br> had fungsi()<br> {</p> var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight]<p> //Elakkan limpahan kiri<br> oBox.offsetLeft <=0 && (oBox.style.left = 0);<br /> //Halang limpahan atas<br /> oBox.offsetTop <=0 && (oBox.style.top = 0);<br /> //Cegah limpahan di sebelah kanan <br /> doc[0] - oBox.offsetLeft - oBox.offsetWidth <= 0 && (oBox.style.left = doc[0] - oBox.offsetWidth "px");<br /> //Cegah limpahan bawah<br /> doc[1] - oBox.offsetTop - oBox.offsetHeight <= 0 && (oBox.style.top = doc[1] - oBox.offsetHeight "px")<br /> }<br /> };<br /> </skrip><br><br> <br><br>Arahan: </p> </div> <p>Atas: ↑ Bawah: ↓ Kiri: ← Kanan: →<strong> Ctrl 1 : latar belakang bertukar hijau </strong> Ctrl 2 : latar belakang bertukar menjadi kuning </p> Ctrl 3 : latar belakang menjadi biru <p> Ctrl ↑ : Zum masuk <br> Ctrl ↓ : Zum keluar <br> <br><br>bahagian html: <br> </p> <p><strong><br></strong>Salin kod</p> <div class="codetitle"><span><a style="CURSOR: pointer" data="24039" class="copybut" id="copybut24039" onclick="doCopy('code24039')"> Kod adalah seperti berikut:<u></u>Blok dialihkan [DIV]</a> <div id="box"></div></span></div> <div class="codebody" id="code24039">Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang. <br> </div>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
