<!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. UVA 1646 Edge Case

    题意:n(3<=n<=10000)个结点组成一个圈,点顺次连接为边,求没有公共点的边集个数. 分析: 1.推规律,n=3有4个,n=4有7个,n=5有11个,n=6有18个,--,a[i] ...

  2. Repost: Set Delivery Block on SO

    If SO is incomplete, then automatically set the delivery block on the SO header. as suggested by ear ...

  3. Android开发代码规范

    目录 1.命名基本原则  2.命名基本规范 2.1编程基本命名规范 2.2分类命名规范 3.分类命名规范 3.1基本数据类型命名规范 3.2控件命名规范 3.3变量命名规范 3.4整个项目的目录规范化 ...

  4. 10.NFS V4.2

    这里只演示使用keytab,也就是客户端与服务端进行keberos进行安全验证连接(注意时间服务器要同步!如果不同步,Kerberos无法通过验证) server端:192.168.1.109 1.y ...

  5. ADO.NET笔记——使用连接池

    相关知识: 连接池的意义: 应用程序往往涉及大量的,并发的数据访问操作 数据库服务器能够同时维系的连接数量非常有限.如果某个数据库访问操作不及时关闭连接,就会减少其他调用对数据库访问的机会.因此,一般 ...

  6. Tomcat部署web应用的方式

    对Tomcat部署web应用的方式总结,常见的有以下四种: 1.[使用控制台部署] 访问Http://localhost:8080,并通过Tomcat Manager登录,进入部署界面即可. 2.[利 ...

  7. [大牛翻译系列]Hadoop（2）MapReduce 连接：复制连接（Replication join）

    4.1.2 复制连接(Replication join) 复制连接是map端的连接.复制连接得名于它的具体实现:连接中最小的数据集将会被复制到所有的map主机节点.复制连接有一个假设前提:在被连接的数 ...

  8. JS 获取select(多选下拉)中所选值的示例代码

    通过js获取select(多选下拉)中所选值,具体实现如下,有需要的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...

  9. Oracle中的通配符

    这是scott用户下的EMP表 EMPNO ENAME JOB MGR HIREDATE SAL COMM DEPTNO 7369 SMITH CLERK 7902 1980/12/17 800   ...

  10. js IDE WebStorm 注册码

    webStorm : UserName:William ===== LICENSE BEGIN ===== 45550-12042010 00001SzFN0n1bPII7FnAxnt0DDOPJA  ...