<!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. netty中的传输

    终于在课设的闲时间把netty实战的四五章给解决了 这里来记录一下第四章里面所讲的IO 首先说到IO,我想,必须要先了解阻塞,非阻塞,同步和异步这四个词 看到一个讲的很易懂的例子:https://ww ...

  2. 破解第二课 JMP法

    首先,我用录屏大师自制了一个视频,给视频加上密码.任意输入,看到报错信息“密码不对,请重新输入” 第一步 反汇编窗口右键点击“中文搜索引擎”---“智能搜索”,搜索引擎界面再次搜索“不对”,结果如下: ...

  3. HashTable原理与源码分析

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

  4. Linux官方源、镜像源汇总

    本文收录在日常运维杂烩系列 一.站点版 1.企业站 搜狐:http://mirrors.sohu.com/ 网易:http://mirrors.163.com/ 阿里云:http://mirrors. ...

  5. PHP接口的思考

    其中就有一个SPL(标准PHP库)的尝试,SPL中实现一些接口,其中最主要的就是Iterator迭代器接口,通过实现这个接口,就能使对象能够用于foreach结构,从而在使用形式上比较统一.比如SPL ...

  6. 不到50行代码实现一个能对请求并发数做限制的通用RequestDecorator

    使用场景 在开发中,我们可能会遇到一些对异步请求数做并发量限制的场景,比如说微信小程序的request并发最多为5个,又或者我们需要做一些批量处理的工作,可是我们又不想同时对服务器发出太多请求(可能会 ...

  7. python 闯关之路二（模块的应用）

    1.有如下字符串:n = "路飞学城"(编程题) - 将字符串转换成utf-8的字符编码的字节,再将转换的字节重新转换为utf-8的字符编码的字符串 - 将字符串转换成gbk的字符 ...

  8. JS_单个或多个文件上传_不支持单独修改

    A-From表单直接填写提交地址,不过干预: 1. 单文件上传 最简单的文件上传,是单文件上传,form标签中加入enctype="multipart/form-data",for ...

  9. SQL语句害死人

    最近在弄Android的SQLite,觉得其语法是在难搞~ 在这里把一些正确规范的实例贴出来,供参考 ';

  10. 第一册：lesson twentynine..

    原文:Come in ,Amy. A:Come in B. Shut the door,please. This bedroom's very untidy. B:What must I do Mrs ...