<!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. LED Decorative Light Manufacturer - Led Wall Lamp Performance Characteristics

    LED Decorative Light Manufacturer    introduction: LED wall lamp is a light-emitting diode as a ligh ...

  2. codeforces Make The Fence Great Again(dp)

    题目链接:http://codeforces.com/contest/1221/problem/D 题目要求ai ! = ai-1,草纸上推理一下可以发现每一个栅栏可以升高的高度无非就是 +0,+1, ...

  3. python开发基础02-字符串操作方法练习题

    1.执行 Python 脚本的两种方式 python解释器 py文件  #!/usr/bin/env python 进入python解释器,便捷命令并执行 pycharm或其他pythonIDE sh ...

  4. Eclipse C++配置静态链接库和动态链接库

    转:https://blog.csdn.net/iteye_20658/article/details/82650699 1.动态库: 一.创建动态链接库1.创建工程new->project-& ...

  5. python 第三方库安装

    1.首先安装pip 2.在cmd中找到pip的安装路径,(一般在python的scripts文件中) 3.pip install 第三方库名称

  6. 移动APP漏洞自动化检测平台建设

    移动APP漏洞自动化检测平台建设   前言:本文是<移动APP客户端安全笔记>系列原创文章中的第一篇,主要讲的是企业移动APP自动化漏洞检测平台建设,移动APP漏洞检测发展史与前沿技术,A ...

  7. JEECG用户录入时用户账号长度修改

    JEECG用户账号默认长度为10字符,但实际运用中很大可能大于10字符. 解决方法: 1.找到\webpage\system\user\user.jsp文件 <input id="us ...

  8. Java代码三级跳——表达式、语句和代码块

    Java代码三级跳—表达式.语句和代码块 表达式(expression):Java中最基本的一个运算.比如一个加法运算表达式.1+2是一个表达式,a+b也是. 语句(statement):类似于平时说 ...

  9. IOS上给body和html绑定click事件的坑

    场景: 在ios上(包括iPhone和ipad) 给window ,html,document,body绑定click事件,点击不会触发 由于ios浏览器都用的safari内核,所以ios浏览器全部中 ...

  10. AD10如何新建一个集成库

    1.新建一个集成库工程 2.添加原理图库 3.添加封装库 4.最关键的一步:对这个工程需要进行编译 5.在界面的右边就能看到自己建的封装库了