<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

<style>

*{padding:0px;

    margin:0px;

    }

button{width:100px;

    height:100px;

    background:linear-gradient(to left,#FF0,#);

    position:fixed;/*弹性布局*/

    right:%;

    top:%;

    text-align:center;/*文本居中，行高，大小，颜色，字体*/

    line-height:50px;

    color:#FFF;

    font-size:25px;

    font-family:arial}

</style>

</head>

<body>

<button>开始加速</button>

<script>

    var btn = document.getElementsByTagName('button')[];

    var div = document.createElement('div');

    document.body.appendChild(div);

    div.style.height = '100px';

    div.style.width = '100px';

    div.style.backgroundColor = 'red';

    div.style.borderRadius = '50%';

    div.style.position = 'absolute';

    div.style.top = '';

    div.style.left = '';

    var speed = ;

    btn.onclick = function(){

        speed +=;}

    document.onkeydown = function(e){

            switch(e.which){

            case ://上

            div.style.top = parseInt(div.style.top) - speed + 'px';

            break;

            case ://下

            div.style.top = parseInt(div.style.top) + speed + 'px';

            break;

            case ://左

            div.style.left = parseInt(div.style.left) - speed + 'px';

            break;

            case ://右

            div.style.left = parseInt(div.style.left) + speed + 'px';

            break;

            }

        }

</script>

</body>

</html>

方向键控制圆球运动（简易）（js）的更多相关文章

  1. 简易选项卡&&简易JS年历

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 基于ROS和python，通过TCP通信协议，完成键盘无线控制移动机器人运动

    一.所需工具包 1.ROS键盘包:teleop_twist_keyboard 2.TCP通讯包:socket $ cd ~/catkin_ws/src $ git clone https://gith ...

  3. [U3D 画起重机，绑脚本和控制它运动的基本操作]

    之前在学习Unity3D,不知为何网上的教学资源真是少啊...我某段时间还卡在不知如何让物体绑个脚本自动运动.. 之所以要学习U3D是因为导师让我做的IOS项目里有个需要模拟起重机,从而控制真实起重机 ...

  4. CSS控制XML与通过js解析xml然后通过html显示xml中的数据

    使用CSS控制XML的显示 book.css bookname{ display:block;color:Red} author{ display:block;font-style:italic} p ...

  5. 投票系统 & 简易js刷票脚本

    早就听说有什么刷票脚本,微博投票等等相关的投票都有某些人去刷票. 试一下吧,兴许自己也会刷票呢?捣鼓了几个小时,终于有所眉目. (1)投票系统 要刷票,就得先有个投票界面. 当然,可以直接去各个投票网 ...

  6. JQuery 通过方向键控制div上下左右移动

    在CSS中当DOM元素的position属性为absolute或relative时,我们可以通过改变这个元素的left和top属性的具体值来控制元素在页面中显现的位置. 利用上述属性,我们可以简单实现 ...

  7. 简易js模板引擎

    前面 js 模板引擎有很多很多,我以前经常用 art-template ,有时候也会拿 vue 来当模板引擎用. 直到...... 年初的时候,我还在上个项目组,那时候代码规范是未经允许不能使用 [外 ...

  8. 简易js进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. html页面控制字体大小的js代码

    dom对象控制显示文章字体大小的js代码 <head> <script type="text/javascript"> function check(siz ...

随机推荐

  1. 如何使用Keras的Model visualization功能

    问题 安装上graphviz和pydot之后调用出现如下问题 ['dot', '-Tpng', '/tmp/tmp1KPaiV'] return code: 1 stdout, stderr: War ...

  2. 可以用py库： pyautogui （自动测试模块，模拟鼠标、键盘动作）来代替pyuserinput

    PyAutoGUI 是一个人性化的跨平台 GUI 自动测试模块 pyUserInput模块安装前需要安装pywin32和pyHook模块.(想要装的看https://www.cnblogs.com/m ...

  3. HashTable原理与源码分析

    本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作,如有错误之处忘不吝批评指正! HashTable内部存储结构 HashTable内部存储结构为数组+单向链 ...

  4. 数据结构(一) 单链表的实现-JAVA

    数据结构还是很重要的,就算不是那种很牛逼的,但起码得知道基础的东西,这一系列就算是复习一下以前学过的数据结构和填补自己在这一块的知识的空缺.加油.珍惜校园中自由学习的时光.按照链表.栈.队列.排序.数 ...

  5. MFC控件编程进度条编写

    MFC控件编程进度条编写 一丶进度条编程需要用到的方法 进度条MFC已经帮我们封装好类了. 叫做 CProgressCtrl  进度条编程也很简单. 封装的方法也就那个那几个. GetPos()  获 ...

  6. Ubuntu16.04环境下搭建基于三台主机的mysql galera cluster集群（实测有效）

    (注意: (1)文中红色字体部分不一定需要操作 (2)由于word文档编辑的原因,实际操作时部分命令需要手动输入!!直接复制粘贴会提示错误!! ) 一  搭建环境: 1 Ubuntu16.04版本(系 ...

  7. 设计模式之装饰模式，session共享的底层原理

    前言 还记得当初写spring-session实现分布式集群session的共享的时候,里面有说到利用filter和HttpServletRequestWrapper可以定制自己的getSession ...

  8. Mybatis学习（五）————— 延迟加载和缓存机制(一级二级缓存)

    一.延迟加载 延迟加载就是懒加载,先去查询主表信息,如果用到从表的数据的话,再去查询从表的信息,也就是如果没用到从表的数据的话,就不查询从表的信息.所以这就是突出了懒这个特点.真是懒啊. Mybati ...

  9. Jenkins入门之任务基本操作

    首先先简单讲一下Jenkins构建任务各种图标的含义 我的主界面有以下构建任务,这里前两列都是图标,第一列为构建的状态,前面已经讲过蓝色代表成功,红色代表失败.当然那是针对一次构建,一个构建任务可能有 ...

  10. R 脚本读取汇总 Excel 表格数据

    主要用到了 xlsx 和 rJava 包,打开 Excel 文件,读取各表格数据,再写入到汇总表. 下图为处理前的原始数据表格: 下图为处理后的数据: 代码实现 安装&加载包的函数实现.ins ...