<!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. netty 对象序列化传输示例

    package object.server.impl; import io.netty.bootstrap.ServerBootstrap; import io.netty.channel.Chann ...

  2. R par yaxp xaxp 显示x轴和y轴的刻度线

    R语言会自动根据数据的范围,在X轴和Y轴上标记合适的刻度 > options(scipen = ) > plot(sample(:, )) 生成的图片如下 通过par("yaxp ...

  3. YARN 启动后失败退出——没有请求资源——Invalid resource request, no resources request

    在ambari-server中修改了yarn的配置,重新启动服务,结果RM启动失败,错误也很奇怪,“不合理的资源请求,没有请求任何资源”!详细如下: -- ::, FATAL resourcemana ...

  4. Flask学习笔记（2）--最简单的小应用

    0x01 第一个小程序 PyCharm新建一个flask项目,第一个小程序,我们来看一下 #引入flask类 from flask import Flask #将Flask对象实例化 app = Fl ...

  5. npm WARN install Refusing to install vue-router as a dependency of itself

    今天在使用npm安装插件的时候提示如下错误: npm WARN install Refusing to install vue-router as a dependency of itself npm ...

  6. 将VSCode添加到右键

    https://www.cnblogs.com/Rexcnblog/p/8046371.html https://www.jianshu.com/p/b49002fa10a7 @echo Off :S ...

  7. 牛客练习赛36B

    唔在cf上做过,A题也做过,神仙说D题也是原题 这个题就是dp了.然后数组滚动一下,很显然能住遇到  i 只与 i-1 有关,所以还是挺好滚的. dp[i][j][k]表示到第I 天一共工作了J天连续 ...

  8. elk-（七）

    最终架构确定为  logs--->blieb--->redis/kafka--->logstash--->es--->kibana 注意:  geoip下载地址: wge ...

  9. Git Bash上传文件

    今天通过Git Bash上传了一个项目(之前是通过Github Desk上传的),操作命令如下: 在目录下shift+右键打开Git Bash 1.git init 2.git add *.py 3. ...

  10. 03.Django的MTV开发模式详解和模型关系构建

    ORM:对象关系映射 一:MTV开发模式把数据存取逻辑.业务逻辑和表现逻辑组合在一起的概念有时被称为软件架构的 Model-View-Controller(MVC)模式. 在这个模式中,Model 代 ...