<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        #div1

        {

            width: 100px;

            height: 100px;

            background-color: red;

        }

    </style>

    <script type="text/javascript">

        function StartMove() {

            //避免多定时器同时工作

            clearInterval(timer);

            var oDiv = document.getElementById("div1");

            timer = setInterval(function () {

                var speed = 10;

                if (oDiv.offsetLeft >= 300) {

                    clearInterval(timer);

                } else {

                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';

                }

            }, 30);

        }

    </script>

</head>

<body>

    <input type="button" id="btn" value="运动" onclick="StartMove()" />

    <br />

    <br />

    <div id="div1"></div>

</body>

</html>

　　

Javascript的动态运动（1）的更多相关文章

  1. canvas ：原生javascript编写动态时钟

    canvas :原生javascript编写动态时钟     此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...

  2. JavaScript DOM动态创建（声明）Object元素

    http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...

  3. 每天一个JavaScript实例-动态省份选择城市

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 理解Javascript的动态语言特性

    原文:理解Javascript的动态语言特性 理解Javascript的动态语言特性 Javascript是一种解释性语言,而并非编译性,它不能编译成二进制文件. 理解动态执行与闭包的概念 动态执行: ...

  5. 第一百一十八节，JavaScript，动态加载脚本和样式

    JavaScript,动态加载脚本和样式 一动态脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. ...

  6. JavaScript 拥有动态类型

    字符串.数字.布尔.数组.对象.Null.Undefined JavaScript 拥有动态类型 JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: 实例 var x // x ...

  7. JavaScript 创建动态表格

    JavaScript 创建动态表格 版权声明:未经授权,严禁转载! 案例代码 <div id="data"></div> <script> va ...

  8. JavaScript的动态特性(通过eval,call,apply和bind来体现)

    JavaScript的动态特性(通过eval,call,apply和bind来体现) JavaScript是一种基于面向对象的.函数式的.动态的编程语言.现在发展到已经可以用在浏览器和服务器端了. 这 ...

  9. Arcgis javascript api 动态图层自图层可见性设置

    Arcgis javascript api 动态图层自图层可见性设置 子图层管理 rest服务 sublayers sublayer ArcGISDynamicMapServiceLayer 本文主要 ...

随机推荐

  1. 【风马一族_Android】适合你 --- 大概的描述

    适合你:专注于解决毕业生,离校所遗留的闲置教材的去向问题的一款APP. 目前的现状:毕业生的闲置教材,被清理宿舍的阿姨.大叔所清理到垃圾场,或拿到收破烂的地方,卖掉. 在毕业季中,存在的闲置物品不只有 ...

  2. System Generator入门

      System generator 安装之后会在Simulin模块库中添加一些Xilinx FPGA专用的模块库,包括Basic Element,Communication,Control Logi ...

  3. 匹配一级分类和二级分类 名字和url 里面有玄机

    1:要匹配的html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  4. ubuntu 14.04 apt-get 方式安装oracle JDK

    之前已经写了 如何手动安装oracle 的JDK :http://www.cnblogs.com/bcsflilong/p/4196536.html 其实 还有可以简单方便的用apt-get 的方式安 ...

  5. header页头内容整理

    meta标签 <meta charset="UTF-8"/> <!--视窗宽度--> <meta name="viewport" ...

  6. 层叠水平（stacking level)

    运用上图的逻辑,上面的题目就迎刃而解,inline-blcok 的 stacking level 比之 float 要高,所以无论 DOM 的先后顺序都堆叠在上面. 不过上面图示的说法有一些不准确,按 ...

  7. MotionEvent中getX()和getRawX()的区别

    http://blog.csdn.net/ztp800201/article/details/17218067 public class Res extends Activity implements ...

  8. Redis 四：存储类型之无序集合

    .sadd num a b c 向num集合中添加abc三个元素 .srem num b 从num集合中删除b元素 .smembers num 获取num集合中所有的元素 .sismember num ...

  9. ios开发之数据的持久化存储机制

    IOS中数据的持久化保存这块内容,类似于Android中文件的几种常见的存储方式. 对于数据的持久化存储,ios中一般提供了4种不同的机制. 1.属性列表 2.对象归档 3.数据库存储(SQLite3 ...

  10. matlab实现共轭梯度法、多元牛顿法、broyden方法

    共轭梯度法: function [ x, r, k ] = CorGrant( x0, A, b ) x = x0; r = b - A * x0; d = r; X = ones(length(x) ...