<!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. 插头dp初探

    问题描述 插头dp用于解决一类可基于图连通性递推的问题.用插头来表示轮廓线上的连通性,然后根据连通性与下一位结合讨论进行转移. 表示连通性的方法 与字符串循环最小表示不同,这种方法用于给轮廓线上的联通 ...

  2. Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程

    Asp.Net Core Web Api图片上传及MongoDB存储实例教程(一) 图片或者文件上传相信大家在开发中应该都会用到吧,有的时候还要对图片生成缩略图.那么如何在Asp.Net Core W ...

  3. django在关闭debug后，admin界面 及静态文件无法加载的解决办法

    当debug为true的时候,ALLOWED_HOSTS是跳过不管用的.所以这里需要将debug关掉,令debug=false,ALLOWED_HOSTS=[ '*' ]表示所有的主机都可以访问 开启 ...

  4. Linux编程 24 shell编程(结构化 if [ condition ] 数值比较，字符串比较)

    一.概述 接着上篇讲的结构化命令,最后讲到了test命令的另一种写法 if [ condition ],它的语法格式如下: --格式如下: if [ condition ] then commands ...

  5. sql server 备份与恢复系列四 大容量模式下的备份与还原

    一. 概述 在sql server 备份与恢复系列的第一篇里,有讲到大容量模式下备份与还原的相关知识.这篇重点来演示在大容量模式下常用的备份与还原模式“完整备份+差异备份+日志备份”. 在大容量恢复模 ...

  6. sql server 索引阐述系列二 索引存储结构

    一.概述. "流光容易把人抛,红了樱桃,绿了芭蕉“ 转眼又年中了,感叹生命的有限,知识的无限.在后续讨论索引之前,先来了解下索引和表数据的内部结构,这一节将介绍页的存储,页分配单元类型,区的 ...

  7. 解决运行nodejs代码Error: listen EADDRINUSE

    问题是什么 EADDRINUSE其实拆分来看就是error address use表示错误地址的使用,也代表着端口占用. 如何解决问题 那讲道理来说,接下来你就需要找到你要用的端口被哪一个进程所占用了 ...

  8. centos7非centos标准服务 /etc/init.d/service_name start || stop 启动异常

    公司自己写的java程序,在centos7系统执行/etc/init.d/service_name start||stop的时候报错: grafana二次开发的程序 [root@docp1 init. ...

  9. Go语言如何判断一个chan被关闭

    当一个chanel被关闭后,再取出不会阻塞,而是返回零值 package main import "fmt" func main() { c := make(chan int, 5 ...

  10. MySQL索引建立和使用的基本原则

    合理设计和使用索引 在关键字段的索引上,建与不建索引,查询速度相差近100倍.   差的索引和没有索引效果一样.   索引并非越多越好,因为维护索引需要成本.   每个表的索引应在5个以下,应合理利用 ...