<!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. The client and server cannot communicate, because they do not possess a common algorithm

    The client and server cannot communicate, because they do not possess a common algorithm This was re ...

  2. IE7下onclick事件失效的问题

    http://blog.csdn.net/spy19881201/article/details/11066975?locationNum=15 $('#abc').unbind('click').c ...

  3. 万能分布式消费框架，添加基于redis中间件的方式。

    框架目的是分布式调度起一切任何函数(当然也包括调度起一切任何方法). 之前写的是基于rabbitmq的,作为专用的消息队列好处比redis的list结构好很多.但有的人还是强烈喜欢用redis,以及r ...

  4. SpringMVC工作原理 : HandlerMapping和HandlerAdapter

    一.HandlerMapping 作用是根据当前请求的找到对应的 Handler,并将 Handler(执行程序)与一堆 HandlerInterceptor(拦截器)封装到 HandlerExecu ...

  5. python 检测字符串编码类型是什么

    for index,value in enumerate(listvalue): adchar=chardet.detect(value) print adchar if adchar['encodi ...

  6. Javascript 变量、函数的声明

    javascript变量 全局变量和局部变量    按照变量的作用域来区分,和大多数编程语言类似,javascript变量也分为全局变量和局部变量.全局变量的作用域是整个js文件,而局部变量的作用域是 ...

  7. sparksql udf自定义函数中参数过多问题的解决

    在进行spark sql数据库操作中,常常需要一些spark系统本身不支持的函数,如获取某一列值中的字符串. 如要获取 “aaaakkkkk”中的第4-第8个字符. 针对这种需求,只有设置UDF来实现 ...

  8. nginx的https和http共存反向代理配置

    一.设置http反向代理: upstream ly.com { server ; server ; } upstream home.ly.com { server ; server ; } 对应增加: ...

  9. ThinkPHP3.2.3中M()和D()的区别详解

    在实例化的过程中,经常使用D方法和M方法, 区别在于:M方法实例化模型无需用户为每个数据表定义模型类,如果D方法没有找到定义的模型类,则会自动调用M方法. 通俗一点说:1.M实例化参数是数据库的表名, ...

  10. webStorm的使用

    最近要写点前端的东西,ideaCE版对js支持不好,写着很蛋疼,于是乎尝试了网上很流行的前端webstorm,但是在加载库文件时总是出错. 源文件:<script src="/jque ...