<!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. windows10打开switchHost，提示无修改权限

    1.在C盘找到hsot文件,点击属性,去掉只读,去掉勾选. 点击编辑 点击Users,选择完全控制,这回降低电脑安全! 确定.

  2. Linux新建用户，切换后只显示$问题

    1,执行以下命令创建一个新的用户 useradd -d /home/sam -m sam -s /bin/sh -g group -G adm,root 这个命令中指定了这个用户登录的shell 是/ ...

  3. instGroup/constraint/Gcell/busguide/netgroup/Bump

    1. instGroup Instance group.中文名例化单元组.Instance group可以用来group一些instances, 在做placement时,如果你希望一些instanc ...

  4. Java实现Word/Pdf/TXT转html

    引言: 最近公司在做一个教育培训学习及在线考试的项目,本人主要从事网络课程模块,主要做课程分类,课程,课件的创建及在线学习和统计的功能,因为课件涉及到多种类型,像视频,音频,图文,外部链接及文档类型. ...

  5. mongo日常命令集锦

    查询某个字段是否存在 db.student.findOne({name:{$exists:true}}) db.student.findOne({'department.name':{$exists: ...

  6. ASP.NET的 Razor引擎和JavaScript是一种什么关系

    Razor能做的JS大部分能做,不是全部.比如说,如果你用了Entity Frame一类的ORM的时候,Razor可以直接绑定数据库数据,但JS就不可能直接访问数据库——必须通过其他web servi ...

  7. the MTS failed last time时的解决办法

    关于6.6.3SP2版本提示The MTS failed last time 1.1    发生前提条件 在重启系统 shutdown -r now后,网页打不开,发现MTS服务无法启动,我自己涉及的 ...

  8. ssh复制秘钥成功后仍然需要输入密码

    执行免秘钥操作 ssh-copy-id -i ~/.ssh/id_rsa.pub lyg@192.168.1.65 被登录机器的文件权限: //用户权限 chmod 700 /home/usernam ...

  9. Codeforces Round #610 (Div. 2)C（贪心，思维）

    沿时间轴枚举,发现关键时间点在于新题目被锁定的前一时间,那是新的题目还没有被锁定并且距离旧的题目已经被锁定的最晚时间,对这些时间点进行操作 #define HAVE_STRUCT_TIMESPEC # ...

  10. 「JSOI2015」套娃

    「JSOI2015」套娃 传送门 考虑贪心. 首先我们假设所有的套娃都互相不套. 然后我们考虑合并两个套娃 \(i\),\(j\) 假设我们把 \(i\) 套到 \(j\) 里面去,那么就可以减少 \ ...