zoukankan      html  css  js  c++  java
  • 夺命雷公狗---javascript NO:12 事件对象2通过event事件对象实现box层的左右移动

    实战盒子移动,目的为了做贪吃蛇

    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=’utf-8′>
    <title></title>
    <style type=’text/css’>
    div#box{
    width:100px;
    height:100px; 
    position:absolute;
    border:1px solid red;
    }
    </style>
    <script src=’public.js’></script>
    <script>
    window.onload = function(){
    var x = 50;  //定义box层的横坐标
    var y = 50;  //定义box层的纵坐标
    $(‘box’).style.left = x+’px';
    $(‘box’).style.top = y+’px';
    //onkeydown事件会在用户按下一个键盘按键时发生
    document.onkeydown = function(event){
    var code;//用于接收键盘键值
    if(window.event){
    //IE浏览器
    code = window.event.keyCode;
    }else{
    code = event.keyCode;
    }
    switch(code){
    case 37:
    x–;
    break;
    case 38:
    y–;
    break;
    case 39:
    x++;
    break;
    case 40:
    y++;
    break;
    }
    $(‘box’).style.left = x+’px';
    $(‘box’).style.top = y+’px';
    }
    }
    </script>
    </head>
    <body>
    <div id=’box’></div>
    </body>
    </html>
  • 相关阅读:
    前端常用布局
    Vue, React, AngularJS, Angular2 我们对流行JavaScript框架们的选择
    使用vue-cli创建vue项目
    Null component Catalina
    初识MongoDB
    小米平板2 win10 MIUI互刷教程
    tomcat报错
    websocket
    前后端数据交互方法
    二叉排序树
  • 原文地址:https://www.cnblogs.com/leigood/p/5031864.html
Copyright © 2011-2022 走看看