<!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. Java锁机制（一）synchronized

    进行多线程编程的时候,需要考虑的是线程间的同步问题.对于共享的资源,需要进行互斥的访问.在Java中可以使用一些手段来达到线程同步的目的: 1. synchronized 2. ThreadLocal ...

  2. 同时安装anaconda2和anaconda3

    安装的过程请参考 Ubuntu14.04下同时安装Anaconda2与Anaconda3 启动的时候cd到$HOME/anaconda2/envs/py3k/bin下 source activate ...

  3. Scala学习笔记（七）：Rational、隐式转换、偏函数、闭包、重复参数及柯里化

    class Rational(n: Int, d: Int) { require(d != 0) private val g: Int = gcd(n, d) val number: Int = n ...

  4. SpringBoot面试题及答案整理

    1. Spring 和 SpringBoot 有什么不同? Spring 框架提供多种特性使得 web 应用开发变得更简便,包括依赖注入.数据绑定.切面编程.数据存取等等. 随着时间推移,Spring ...

  5. 直播框架ijkplayer

    直播框架ijkplayer [如何快速的开发一个完整的iOS直播app](播放篇) ijkplayer ios项目集成(图文详细版) 一步步搭建视频直播系统,基于LFLiveKit+ijkplayer ...

  6. DHT网络

    @(基础技术) 现在有一种方法,可以通过磁力链接,例如magnet:?xt=urn:btih:0482e0811014fd4cb5d207d08a7be616a4672daa,就可以获取BT文件. 这 ...

  7. Qt编写自定义控件9-导航按钮控件

    前言 导航按钮控件,主要用于各种漂亮精美的导航条,我们经常在web中看到导航条都非常精美,都是html+css+js实现的,还自带动画过度效果,Qt提供的qss其实也是无敌的,支持基本上所有的CSS2 ...

  8. 【Zookeeper系列】ZooKeeper机制架构（转）

    原文链接:https://www.cnblogs.com/sunddenly/p/4133784.html 一.ZooKeeper权限管理机制 1.1 权限管理ACL(Access Control L ...

  9. Less 编译生成 css

    开发模式下使用less.js <link rel="stylesheet/less" type="text/css" href="~/Conte ...

  10. codeforces R 493 div2

    我蓝了!蓝了!!!蒟蒻的蓝色.日常点开friend发现竟然没几个人打??然后去div1看了一下果然学长全都去打div1了呜呜呜. 看到了久违的黄大仙,以为他今晚要上grandmaster,结果打完发现 ...