<!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. TFTP服务[精简版]：简单文件传输协议

    简单文件传输协议(Trivial File Transfer Protocol,TFTP)是一种基于 UDP 协议在客户端 和服务器之间进行简单文件传输的协议.顾名思义,它提供不复杂.开销不大的文件传 ...

  2. winform学习（8）RichTextBox控件

    RichTextBox控件允许用户输入和编辑文本的同时提供了比普通的TextBox控件更高级的格式特征. RichTextBox的控件标识符.SelectionColor = Color.Blue;  ...

  3. Mysql 函数定义及批量数据脚本

    零.说在前面 在定义函数之前 需要先将 log_bin_trust_function_creators 值设为开启,原因如下 在主从复制的两台Mysql服务器中,slaver会从master复制数据, ...

  4. Oracle中的数据迁移到Mysql数据库中的方式Navicat premium工具

    1.安装 Navicat premium工具 2.破解 Navicat premium工具 3.连接需要相互迁移的两个库Mysql和Oracle(可以是远程的或者本机的数据库都是可以的) 4.连接上之 ...

  5. LabVIEW随笔2_毕业了

    08年研究生毕业了,在原来公司的兼职也结束了,开始真正的工作生涯了. 在此,非常感恩我的导师綦院长,体谅我的困楚之处,在我的研究生学习期间给予我的宽容和照顾.不料,2014年,恩师五十有余,却突然离世 ...

  6. html中的路径详解

    路径指文件存放的位置,在网页中利用路径可以引用文件,插入图像.视频等.表示路径的方法有两种:相对路径,绝对路径.以下讨论均是在HTML环境下进行. 相对路径 相对路径是指目标相对于当前文件的路径,网页 ...

  7. jmeter的使用---控制器

    1.如果(If)控制器.Switch Controller if控制语句,判断字段是否存在,或者符合,执行不同的逻辑 2.简单控制器 一次进件流程,需要不同模块的数据,例如登陆,提交个人信息,信用认证 ...

  8. 解决Hbase启动后，hmaster会在几秒钟后自动关闭（停掉）！！！

    在日志(身为小白白的我,一开始日志在哪我都不知道!路径:/usr/local/hadoop/app/hbase-0.98.8/logs/hbase-hadoop-master-Master.log(也 ...

  9. 将html代码部署到阿里云服务器，并进行域名解析，以及在部署过程中遇到的问题和解决方法

    本博客主要是说一下,,如何将html代码部署到阿里云服务器,并进行域名解析,以及在部署过程中遇到的问题和解决方法. 1.先在阿里云上购买一台阿里云服务器(ECS云服务器): 2.远程连接上该服务器,在 ...

  10. [python] VSCode+Jupyter 安装步骤以及注意事项

    1. 安装Python2. 安装Jupyter, pip install 安装Jupyter(若使用Anaconda,则需要将其添加到环境变量中)3. 将Python的Scripts文件夹添加到系统环 ...