<!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. 使用 Postman 取得 Token 打另一隻 API

    使用 Postman 取得 Token 打另一隻 API Spring MVC token 统一校验和user 信息自动获取 使用token和SpringMVC来实现安全的RESTFul接口 spri ...

  2. Android利用Mediapalyer播放本地资源文件声音

    首先在res下创建raw,然后将mp3音乐拷贝到raw下 直接贴代码吧 //开始播放声音 public class PlayVoice { private static MediaPlayer med ...

  3. sql 同步2个表中的一个字段数据

    update PMS.tenant_contract a inner join(select id,home_id from PMS.owner_contract) c on a.id = c.id ...

  4. FatFs文件系统的移植

    FatFs 的底层可以写一次命令,读写多个扇区.FatFs的设计的读写的思想就很好,小块的数据,我就经过Buffer来存储,大块的数据,我就直接进行存取,那样速度,效率高了很多,看图: FatFs文件 ...

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

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

  6. 《转》循环神经网络(RNN, Recurrent Neural Networks)学习笔记：基础理论

    转自 http://blog.csdn.net/xingzhedai/article/details/53144126 更多参考:http://blog.csdn.net/mafeiyu80/arti ...

  7. css背景图撑开盒子高度

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

  8. JS中实现种子随机数

    参数: 详谈JS中实现种子随机数及作用 我在Egret里这么写... class NumberTool{ /**种子(任意默认值5)*/ public static seed:number = 5; ...

  9. 关于Intel漏洞的学习

    这几天报道了Intel的漏洞,这里学习一下并做个记录. 报告:https://spectreattack.com/spectre.pdf #include <stdio.h> #inclu ...

  10. Centos 为Nginx 搭建https

    Youtube Nginx 扩展模块 certbot文档 yum -y install epel-release yum -y install certbot certbot certonly --s ...