<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘控制小球的移动</title>
    <style type="text/css">
div{
/*    background: orange;*/    
    width: 100px;
    height: 100px;
    padding: 30px;
    border-radius: 200px;
    position: absolute;
    background-image: url(pic/sc16.png);
}
    </style>

</head>
<body>
    <div id="ball" style="top:50px;left: 50px"></div>
    <script>
        var key={
W:87,
S:83,
A:65,
D:68,
}
function keymove(e){
var ball=document.getElementById('ball');
var top=parseInt(ball.style.top);
var left=parseInt(ball.style.left);
// alert(top+50+'px');
switch(e.keyCode){
case key.W:
ball.style.top=top-50+'px';
break;
case key.S:
ball.style.top=top+50+'px';
break;
case key.A:
ball.style.left=left-50+'px';
break;
case key.D:
ball.style.left=left+50+'px';
break;
}
}
document.onkeydown= keymove;
    </script>

</body>
</html>

html5 javascript 事件练习3键盘控制练习的更多相关文章

  1. html5 javascript 事件练习3随机键盘

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. html5 javascript 事件练习2

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. html5 javascript 事件练习1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. 前端（十五）—— JavaScript事件：绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...

  5. Javascript 事件对象（六）键盘事件

    keyCode获取用户按下键盘的哪个按键 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Conte ...

  6. javascript每日一练（七）——事件二：键盘事件

    一.键盘事件 onkeydown触发, keyCode键盘编码 ctrlKey altKey shiftKey 键盘控制div移动 <!doctype html> <html> ...

  7. javaScript事件（七）事件类型之键盘与文本事件

    键盘事件如下: keydown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件. keypress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件. k ...

  8. JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;

    JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...

  9. JavaScript onkeydown事件入门实例(键盘某个按键被按下)

    JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...

随机推荐

  1. Django admin 自定义Choice_field

    在使用Django Admin后台时,有时候想自定义某一字段的Choice_field,例如屏蔽某些选项,只显示某些指定的选项. 想象这样的应用场景,我有一个网站,导航栏是这样的: 点开“技术杂谈”后 ...

  2. osg shader 相机观察矩阵逆矩阵 求顶点世界坐标

    uniform mat4 osg_ViewMatrixInverse;//osg内置uniform void main() { vec4 posWorld = osg_ViewMatrixInvers ...

  3. WebStorm 11的安装与激活

    之所以选择WebStorm 11的这个版本主要是因为他的激活比较方便. WebStorm官网上目前已经不是11版本了,这意味着你得通过其他途径下载WebStorm 11(如:度娘). 下载安装完之后, ...

  4. odoo11社区版python依赖库相对odoo10的变化

  5. Kafka集群管理工具kafka-manager的安装使用

    一.kafka-manager简介 kafka-manager是目前最受欢迎的kafka集群管理工具,最早由雅虎开源,用户可以在Web界面执行一些简单的集群管理操作.具体支持以下内容: 管理多个集群 ...

  6. ganglia使用nagios告警

    1.复制所需脚本到nagios的脚本目录,并设置权限  cp -fr ./ganglia-3.7.1/contrib/check_ganglia.py   /usr/local/nagios/libe ...

  7. GBDT 详解分析 转+整理

    GBDT DT 回归树 Regression Decision Tree 梯度迭代 GBDT工作过程实例 需要解释的三个问题 - 既然图1和图2 最终效果相同,为何还需要GBDT呢? - Gradie ...

  8. poj 1269

    水题.判断两条直线位置关系. 考虑平行的情况,那么 四边形的面积会相等,重合的话,四边形的面积相等且为0. 除去这两种就一定有交点. #include <cstdio> #include ...

  9. react+mobx 编写 Async装饰器

    使用 // indexStore.js import axios from "axios"; import { from } from "rxjs"; impo ...

  10. Java模版方法的另一种实现

    面试荔枝FM杯具,遂死磕AQS途中发现一个有趣的模版用法,记下来. 模版方法是很重要的设计模式,在数据访问层.众多的插件接口都可见其影子,一般的实现都是在模版中定义抽象方法并使用其方法进行算法,让具体 ...