<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}

    #div2 {width:1px; height:300px; background:black; position:absolute; left:300px; top:0}

    #div3 {width:1px; height:300px; background:black; position:absolute; left:100px; top:0}

    </style>

    <script>

        var timer=null;

        function startMove(iTarget)

    {

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

        clearInterval(timer);

        timer=setInterval(function() {

            //var speed=(300-oDiv.offsetLeft)/10;

            //speed=Math.ceil(speed);

            //speed=speed>0?Math.ceil(speed):Math.floor(speed);

            var speed=0;

            if(oDiv.offsetLeft<iTarget)

                {

                    speed=7;

                }

            else

                {

                    speed=-7;

                }

            if(Math.abs(iTarget-oDiv.offsetLeft)<=7)

                {

                    clearInterval(timer);

                    oDiv.style.left=iTarget+'px';

                }

            else

                {

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

                }

            //document.title=oDiv.offsetLeft ;

        }, 30);

    }

    </script>

</head>

<body>

<input type="button" value="到100" onClick="startMove(100)"/>

<input type="button" value="到300" onClick="startMove(300)"/>

<div id="div1">

</div>

<div id="div2"></div>

<div id="div3"></div>

</body>

</html>

js 匀速运动到100和到300的更多相关文章

  1. 怎么用js编写1——100的质数？

    这里来自csdn问答的一个问题,怎么用js编写1——100的质数? http://ask.csdn.net/questions/214429 质数也就是素数,即只能被1和自身整除的数,因此可以构造循环 ...

  2. js匀速运动停止条件

    匀速运动,怎么让它到达指定位置时停止呢? 原理: 1,物体和目标的差值距离小于等于速度时,即停止 2,接着让物体移动位置等于目标位置 示例:匀速运动停止 html部分 <input type=& ...

  3. js:自动亮起100盏灯

    1)    使用js在页面上显示100盏灯,并标记从1到100的编号2)    页面加载后3秒,从编号是1的灯依次自动亮起.3)    每过0.5秒亮下一盏灯(10分)4)    所有灯亮起后,弹出确 ...

  4. JS随机生成100个DIV每10个换行(换色，生成V字和倒V)

    附图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  5. js匀速运动框架案例

    点击"开始运动"按钮,红色的#red区块开始向右匀速运动,抵达到黑色竖线位置自动停止,再次点击"开始运动"#red区块也不会再运动.同时为了便于后期维护,要求运 ...

  6. 用js编程输出100以内所有的质数和个数（提示：一个大于1的自然数，除了1和它本身外，不能被其他自然数整除的数都是质数）

    <script type="text/javascript"> for(var i = 3; i <= 100; i ++) {//控制2-100所有的数i fo ...

  7. Visual Studio Code 1.0发布：100+语言，300+pull请求，1000+扩展

    在第一个预览版发布一年后,微软发表了Visual Studio Code 1.0. 在//BUILD 2015大会上,微软宣布,他们的一个团队需要几个月来创建Visual Studio Code的第一 ...

  8. js匀速运动

    匀速运动      封装匀速运动原理:设置定时器,将传入的ele,设定一个速度,使用定时器获取当前时间的一个位置,加上速度值,给回节点,当节点到达目标位置,判断给他清除定时器. 匀速效果地址:http ...

  9. js生成1~100随机数

    (function (min,max){ var range = max - min; var rand = Math.random(); var num = min + Math.round(ran ...

随机推荐

  1. 深入 js 深拷贝对象

    前言 对象是 JS 中基本类型之一,而且和原型链.数组等知识息息相关.不管是面试中,还是实际开发中我们都会碰见深拷贝对象的问题. 顾名思义,深拷贝就是完完整整的将一个对象从内存中拷贝一份出来.所以无论 ...

  2. 每天进步一点点------Allegro 修线

    Allegro中修线的方法有很多种,这里重点介绍走线的移动和走线的替换,掌握这两种方法,基本可以完成电路板的修线工作.  走线的移动 第1步:执行菜单命令Route->Slide,进入移动走线命 ...

  3. eclipse报错：unable to install breakpoint in .......due to missing line number attributes

    报错信息如下: 解决方案方案1.把断点都干掉,再启动.应该是代码更新后,断点位置没有代码了或位置改变了. 方案2.在Eclipse - Preferences - Java - Complier 下  ...

  4. zookeeper linux分布式部署

    安装包下载地址:http://mirror.bit.edu.cn/apache/zookeeper,记住要下载那个bin的不要下tar.gz包不然即使你安装了也会报错误: 找不到或无法加载主类org. ...

  5. Scrapy爬虫基本使用

    一.Scrapy爬虫的第一个实例 演示HTML地址 演示HTML页面地址:http://python123.io/ws/demo.html 文件名称:demo.html 产生步骤 步骤1:建议一个Sc ...

  6. Java+Selenium自动化测试学习（一）

    自动化测试基本流程 1.设置chromedriver的地址System.setProperty(); 2.创建一个默认浏览器ChromeDriver driver = new ChromeDriver ...

  7. FreeRTOS学习笔记2：列表

    list.h 列表结构List_t 列表:主要看三个 xLIST:1.5检查列表完整性的.但是需要开启.默认不开启 2:记录列表中列表项的 数量:3:记录当前列表项 索引号:4:列表中的最后一个 列表 ...

  8. 旋转坐标+前缀和（zqu 25001）

    本题题意:在一个矩阵中,去随机一点,设定一个步数K,求出从这个点可以走到的范围的和,求最大值 思路:这个范围的和是一个菱形,我们把他旋转45°,然后成为一个正放的矩阵,求出二维前缀和 然后用前缀和的性 ...

  9. Linux shell tr 命令详解

    该随笔摘自 https://www.jb51.net/article/103892.htm Linux shell tr 命令详解 1. 用途 tr,translate的简写,主要用于压缩重复字符,删 ...

  10. ALSA driver--PCM实例创建框架

    在介绍PCM 之前,我们先给出创建PCM实例的框架. #include <sound/pcm.h> .... /* hardware definition */ static struct ...