<!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. Debug Intro

    The ABAP Debugger is used tool to execute and analyze programs line by line. Using it we can check t ...

  2. ECMAScript整理笔记(持续更新....)

    参考文献: ECMAScript Array:http://www.jimmycuadra.com/posts/ecmascript-5-array-methods ECMAScript5兼容展示大全 ...

  3. PHP流程控制语句下

    ok,继续搞. while循环: while(expr){ 程序块: } 条件expr成立执行程序块,否则结束. do while循环:do while循环比while循环要多循环一次,它要先执行程序 ...

  4. 为ProgressBar进度条设置颜色1

    可以通过xml文件来设置,方法如下: 1:先在布局文件中的ProgressBar加入下面属性: android:progressDrawable="@drawable/progress_ba ...

  5. mikrotik/IPSec Dynamic End points Updater.rsc

    # IPSec Peer/Policy Updater for Dynamic WAN addresses # ============================================ ...

  6. WPF：简洁为美

    (1)3行代码实现水印TextBox(Watermark  TextBox) 效果图: 源代码: <Grid> <Grid.Resources> <BooleanToVi ...

  7. 【笔记】W3C CSS关键属性

    white-space属性: white-space 属性设置如何处理元素内的空白. 可能的值 值 描述 normal 默认值,合并所有空格,换行符会被浏览器忽略 pre 空白会被浏览器保留.其行为方 ...

  8. 单例模式（Singleton）的6种实现

    1.1.1 摘要 在我们日常的工作中经常需要在应用程序中保持一个唯一的实例,如:IO处理,数据库操作等,由于这些对象都要占用重要的系统资源,所以我们必须限制这些实例的创建或始终使用一个公用的实例,这就 ...

  9. IOS开发问题录：如何在Swift中引入Head文件？

    最近在学习IOS开发,从一个简单的登录开始,逐步解决了一个网络访问.获取控件值等问题,遇到了信息加密的问题. 做为IOS的入门者,信息加密需要解决如下几个问题: 1.IOS的MD5加密有没有固定函数, ...

  10. 【转载】link和@import的区别

    link和@import的区别 原文地址:http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html 页面中使用CSS的方式主要有3种:行内添 ...