JOE个人网站

JOE个人网站，不仅仅是一个网站，更像是一个展现自我的平台，致力于让朋友们都可以
有所感触，有所收获。

键盘事件

2017-12-19 16:06:58 
1、键盘事件
 onkeypress 的ASCII码是小写值
 onkeydown 的ASCII码是大写值

-----------------实现div按wasd上左下右的移到--------------------
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Demo</title>
  <script>
   window.onload=function() {
    //获取div对象，设置为全局对象
    odiv=document.getElementById('box');
    //获取初始的top
    itop=parseInt(odiv.style.top);
    //获取初始的left
    ileft=parseInt(odiv.style.left);
   }

   //div移动函数
   function move(event) {
    //获取键盘事件的ASICII码
    var c=event.charCode || event.keyCode;
    //判断ASIC码，更改div的定位坐标，实现移动效果 上w 119 下s 115 左a 97 右d 100
    switch(c) {
     //上
     case 119:
      itop-=10;
      odiv.style.top=itop+'px';
      break;
     //下
     case 115:
      itop+=10;
      odiv.style.top=itop+'px';
      break;
     //左
     case 97:
      ileft-=10;
      odiv.style.left=ileft+'px';
      break;
     //右
     case 100:
      ileft+=10;
      odiv.style.left=ileft+'px';
      break;
    }
   }
  </script>
 </head>
 <!-- 键盘事件可以写在body中 -->
  <body onkeypress='move(event)'>
   <div id="box" style="width:50px;height:50px;border:1px solid black;position:absolute;top:0;left:0"></div>
  </body>
</html>

-----------JS不写在body里的方法----------------
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Demo</title>
  <script>
   window.onload=function() {
    //获取div对象，设置为全局对象
    odiv=document.getElementById('box');
    //获取初始的top
    itop=parseInt(odiv.style.top);
    //获取初始的left
    ileft=parseInt(odiv.style.left);

    //获取body对象
    document.body.onkeypress=function(event) {
    //获取键盘事件的ASICII码
    var c=event.charCode || event.keyCode;
    //alert(c);
    //判断ASIC码，更改div的定位坐标，实现移动效果 上w 119 下s 115 左a 97 右d 100
    switch(c) {
     //上
     case 119:
      itop-=10;
      odiv.style.top=itop+'px';
      break;

     //下
     case 115:
      itop+=10;
      odiv.style.top=itop+'px';
      break;

     //左
     case 97:
      ileft-=10;
      odiv.style.left=ileft+'px';
      break;

     //右
     case 100:
      ileft+=10;
      odiv.style.left=ileft+'px';
      break;
    }
    }
   }
  </script>
 </head>
 <!-- 键盘事件可以写在body中 -->
  <body>
   <div id="box" style="width:50px;height:50px;border:1px solid black;position:absolute;top:0;left:0"></div>
  </body>
</html>