<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    #box1{
      width: 100px;
      height: 100px;
      background-color: red;
      position: fixed;
      top: 50px; 
    }

  

    
  </style>

  <script>

    window.onload = function(){
   
        /**
         *  使 div 可以根据不同的方向键 向不同的方向移动 
         *  按左键 div 向左移
         *  按右键 div 
         *   ...
         * */ 
        var box1 = document.getElementById("box1");  

         document.onkeydown = function(event){
            event = event || window.event;

            // 定义一个 变量 来表示 移动的速度
            var speed = 10;

            // 当用户按了 ctrl 以后， 速度加快
            if(event.ctrlKey){
              speed = 500;
            }


            /**
             *  37 左
             *  38 上
             *  39 右
             *  40 下
            */
           switch (event.keyCode) {
             case 37:
              //  alert("向左"); // left 值减小
               box1.style.left = box1.offsetLeft - speed + 'px'
               break;
             case 39:
              //  alert("向右");
               box1.style.left = box1.offsetLeft + speed + 'px'
               break;  
              case 38:
              //  alert("向上");
               box1.style.top = box1.offsetTop - speed + 'px'
               break; 
              case 40:
              //  alert("向下");
              box1.style.top = box1.offsetTop + speed + 'px'
               break;  
             default:
               break;
           }
           if(event.key){

           }

         }
        
          /**
           * 键盘事件
           * onkeydown
           *   按键被按下 
           *      对于onkeydown 来说 如果一直按着 某个按键不松手 则事件会一直触发
           *      当onkeydown 连续触发时, 第一次和第二次之间会间隔稍微长一点，其他的会非常的快
           *         这种设计 是为了 防止误操作的发生
           * onkeyup  
           *   按键被松开
           * 
           * 键盘事件一般 都会绑定给一些可以获取到焦点的对象 或者 document
          */   

          // document.onkeydown = function(event){
          //   event = event || window.event;

            /**
             *  可以通过 keyCode 来获取按键的编码
             *  通过它 可以判断哪个按钮被按下了
             *  除了 keyCode 事件对象中还提供了几个属性
             *  altKey 
             *  ctrlKey
             *  shiftKey
             *    这三个用来判断 alt ctrl 和 shift 是否被按下
             *    如果按下则返回true,否则返回 false
            */

            // 判读一个 y 是否被按下
            // if(event.keyCode === 89){
            //   console.log('y被按下了');
            // }

            // 判断 y 和 ctrl 是否被同时按下
          //   if(event.keyCode === 89 && event.ctrlKey){
          //     console.log('ctrl+y都被按下了');
          //   }

          //   // console.log(event.keyCode);
          // }

          // document.onkeyup = function(){
          //   console.log('按键松开了');
          // }


          // 获取input
          // var input = document.getElementsByTagName("input")[0];
          // input.onkeydown = function(event){ 
          //   event = event || window.event; 
          //   // 数字 48-57  禁止输入数字
          //   if(event.keyCode >= 48 && event.keyCode <=57){
          //     // 取消默认行为
          //     return false; 
          //   }
            
            // 只能输入数字
            // if(event.keyCode >= 48 && event.keyCode <=57){ 
            // }else{
            //   // 取消默认行为
            //   return false; 
            // }
            
          //   console.log(event.keyCode); 
          // }
   
  
    }
  

  </script>
</head>
<body >
   
  <div id="box1"></div>

  <input type="text">
   
</body>
</html>