<!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. TCP通信三次握手的过程

    过程 编辑 第一次 第一次握手:建立连接时,客户端 发送syn包(syn=j)到服务器,并进入SYN_SENT状态,等待服务器确认:SYN:同步序列编号(Synchronize Sequence Nu ...

  2. const char *p、char const *p、char * const p的区别？

    const char *p和char const *p是一样的,都表示定义一个指向字符常量的指针,指针的内容(字符)不可变.char * const p表示一个指向字符的指针常量,字符可以改变,但是指 ...

  3. 【风马一族_Python】 决策树

    <机器学习实战>第三章 决策树 ------------------------------------- #1 trees.py 计算给定数据集的香农熵 ---------------- ...

  4. Lucene使用IKAnalyzer分词实例 及 IKAnalyzer扩展词库

    文章转载自:http://www.cnblogs.com/dennisit/archive/2013/04/07/3005847.html 方案一: 基于配置的词典扩充 项目结构图如下: IK分词器还 ...

  5. IntelliJ IDEA+Tomcat+Nginx运行git项目

    1.克隆Git项目到本地 (1)设置Git工具路径:file>settings>Version Control>Git (2)设置GitHub账户:file>settings& ...

  6. yum安装报错有冲突file /usr/lib64/php/modules/fileinfo.so conflicts between

    yum安装报错有冲突file /usr/lib64/php/modules/fileinfo.so conflicts between attempted installs of php-pecl-f ...

  7. C# 操作.ini文件

    1.声明变量 #region "声明变量" /// <summary> /// 写入INI文件 /// </summary> /// <param n ...

  8. PHP页面跳转代码

    这年头,真是好记性不如烂笔头,学的还没有忘的快,刚才用到的页面跳转,却又记不清楚了,故特意整理了一下,用做以后参考.从一个网页跳转到另一个网页,是LAMP项目中最常用的技术之一,页面跳转可能是由于用户 ...

  9. referenceerror wx is not defined 微信JsSdk开发

    如果你和我一样遇到了“referenceerror wx is not defined”错误,很有可能是jweixin-1.0.0.js与你其它某js冲突. 解决办法: <script type ...

  10. NGUI3.5系列教程之 一些小功能的实现

    (一)可拖动窗体的实现: 1:添加一个Sprite为鼠标点击区域,改名为:DragSprite 2:给DragSprite添加Collider 3:给DragSprite添加Drag Object , ...