<!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. Canny提取图像轮廓

    #include <iostream> #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgu ...

  2. odoo开发笔记--取消正在升级中模块

    场景描述: 开发过程中,有时候会遇到,模块安装的时候,一直卡着,走不过去:或者安装报错,导致进入了系统! 这个时候,怎么处理呢? 先简单说下,odoo中模块的升级有4个状态,模块相关的安装情况记录在表 ...

  3. Android--UI之Button

    前言 最近一直在讲androidUI控件的使用方式,这篇博客讲解一下基本上属于用处最广泛的控件之一的Button控件.如果有过其他平台开发经验的程序员,对按钮是不会陌生的.本篇博客首先讲解一下Andr ...

  4. 流式大数据计算实践（2）----Hadoop集群和Zookeeper

    一.前言 1.上一文搭建好了Hadoop单机模式,这一文继续搭建Hadoop集群 二.搭建Hadoop集群 1.根据上文的流程得到两台单机模式的机器,并保证两台单机模式正常启动,记得第二台机器core ...

  5. ZooKeeper系列(2)：ZooKeeper命令行工具zkCli.sh

    ZooKeeper系列文章:https://www.cnblogs.com/f-ck-need-u/p/7576137.html#zk 1.简介 ZooKeeper提供了一个非常简单的命令行客户端zk ...

  6. oracle9i的erp数据库无法正常关闭的解决方法。

    oracle9i版本的ERP数据库无法正常关闭. 场景描述:oracle9i数据库正常关闭的时候,hang住在一个地方无法正常关闭. 解决思路:查看alert日志,分析问题. [oraprod@erp ...

  7. 华为路由器帧中继 FR 实验

    帧中继简介 帧中继( Frame Relay)是一种用于连接计算机系统的面向分组的通信方法.它主要用在公共或专用网上的局域网互联以及广域网连接.大多数公共电信局都提供帧中继服务,把它作为建立高性能的虚 ...

  8. 实战！基于lamp安装Discuz论坛-技术流ken

    简介 我前面的博客已经详细介绍了lamp采用yum安装以及编译安装的方式,这篇博客将基于yum安装的lamp架构来实战安装Discuz论坛,你可以任选其一来完成. 系统环境 centos7.5 服务器 ...

  9. 前端（二）之 CSS

    前端之 CSS 前言 昨天学习了标记式语言,也就是无逻辑语言.了解了网页的骨架是什么构成的,了解了常用标签,两个指令以及转义字符:其中标签可以分为两大类: 一类是根据标签内容可以分类单双标签,单标签指 ...

  10. 【转】探讨：ASP.NET技术的学习顺序问题

    摘要:很多人对于ASP.NET的入门和学习顺序比较迷茫,今天让我们一起来跟随作者的思路学习探讨ASP.NET的学习顺序问题,希望有所帮助. 如果你已经有较多的面向对象开发经验,跳过以下这两步: 第一步 ...