<!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. ACM的探索之Everything is Generated In Equal Probability! 后序补充丫！

    Problem Desciption: 百度翻译后的汉化: 参见博客:https://www.cnblogs.com/zxcoder/p/11253099.html https://blog.csdn ...

  2. Bugku - 好多压缩包 - Writeup

    bugku - 好多压缩包 - Writeup M4x原创,转载请注明出处 这道题前前后后做了好几天,这里记录一下 题目 文件下载 分析 解压下载后的文件,发现有68个压缩文件,并且每个压缩文件里都有 ...

  3. n阶高精度乘法，（求高阶阶乘）

    先来复习一下小学数学 : 大家还记不记得小学算多位数的乘法是怎么算的? 卖个关子,大家一定要好好想想! 好了,别管到底还能不能想起来我们都要一块复习一下: 我们借助一下源自百度的图片 来复习下 相信大 ...

  4. STM32程序烧录总结

    1.程序烧录方式 1)ST-LINK下载 2)SWD下载 SWD对应的引脚为:GND.RST.SWDIO.SWDCLK SWD与Jlink的比较 3)串口下载 串口下载不能直接在MDK点击Downlo ...

  5. Axure licensee key 8~9-转

    转:https://7rp.cn/34 AxureRP v9.0.0.3646 正式版 — 亲测可用 Licensee: jasmine Key: ATocOwMG75ijKpF0OEDSHQ3UZQ ...

  6. 偏移分页器、游标分页器、Django-filter插件

    复习 """ 1.drf-jwt签发与校验源码 签发token的请求 - 登录请求 - ObtainJSONWebToken - post - 将账号密码丢给序列化类处理 ...

  7. 吴裕雄 python 机器学习——集成学习AdaBoost算法分类模型

    import numpy as np import matplotlib.pyplot as plt from sklearn import datasets,ensemble from sklear ...

  8. java后台接受不到vue传的参数

    @RequestMapping(value = "/delBelowImg") @Transactional public R delBelowFile(@RequestParam ...

  9. JAXB "有两个名为 "**" 的属性,类的两个属性具有相同名称 "**""解决方案

    这里说的名称冲突指的是: JavaBean 属性名称与字段名称之间的名称冲突.在pojo类中的setter和getter方法会导致运行报错:Exception in thread "main ...

  10. layuiAdmin std v1.x 【iframe版】开发者文档

    layuiAdmin pro v1.x [单页版]开发者文档 layuiAdmin.std(iframe 版) 是完全基于 layui 架构而成的通用型后台管理模板系统,采用传统的 iframe 多页 ...