<!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. void指针

    指针有两个属性:指向变量/对象的地址 和长度 但是指针只存储地址,长度则取决于指针的类型 编译器根据指针的类型从指针指向的地址向后寻址 指针类型不同则寻址范围也不同,比如: int*从指定地址向后寻找 ...

  2. Boost库实现线程池学习及线程实现的异步调用

    A.Boost线程池实现 参考自: Boost库实现线程池实例 原理:使用boost的thread_group存储多个线程,使用bind方法将要处理的函数转换成线程可调用的函数进行执行:使用队列存储待 ...

  3. L014-oldboy-mysql-dba-lesson14

          L014-oldboy-mysql-dba-lesson14             来自为知笔记(Wiz) 附件列表

  4. arm汇编指令总结（不断更新）

    /** ****************************************************************************** * @author    Maox ...

  5. git 的使用(4)-git暂缓区工作区原理和修改删除等命令

    文章转载自:http://blog.csdn.net/think2me/article/details/39056379 博主说未经本人允许,不得转载,那就不贴了,拷贝关键部分作备忘 1. 暂存区是G ...

  6. Visual Studio 2012 使用免费的Team Foundation Service

    VS2012提供了在线的TFS服务,免费支持五人小团队,收费情况尚未确定,下面本文演示如何申请和连接在线TFS 服务器. 一.申请TFS服务 首先,打开VS2012,看看是否有团队资源管理器,如果没有 ...

  7. windbg调试.net程序

    1. 解决线上.NET应用程序的如下问题: 崩溃 CPU高 程序异常 程序Hang死 2. 安装WinDbg: http://msdn.microsoft.com/en-us/windows/hard ...

  8. php学习日志（5）-解决Windows Live Writer错误:WindowsLive.Writer.CoreServices.HttpRequestHelper的类型初始值设定发生异常

    以前用Windows Live Writer写日志都好好的,前几天用写完日志,点击发布,突然弹出意外错误:“WindowsLive.Writer.CoreServices.HttpRequestHel ...

  9. GITHUB基础使用教程

    windows系统下:   1.安装完成后,还需要最后一步设置,在命令行输入: $ git config --global user.name "Your Name" $ git ...

  10. 通过百度地图API显示当前位置在地图上（图标显示）--第三方开源--百度地图（二）

    1.下载百度地图的demo,下载地址:http://lbsyun.baidu.com/sdk/download?selected=mapsdk_basicmap,mapsdk_searchfuncti ...