[学习笔记]JavaScript基础--缓冲1

最新推荐文章于 2015-11-24 13:16:57 发布

Mr_Lan_

最新推荐文章于 2015-11-24 13:16:57 发布

阅读量267

点赞数

分类专栏： JavaScript基础

本文链接：https://blog.csdn.net/Mr_Lan_/article/details/47358489

版权

JavaScript基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0px;
            top: 50px;
        }
       
        #div2 {
            width: 1px;
            height: 300px;
            position: absolute;
            background:black;
            left: 300px;
            top: 0;
        }
    </style>
    <script>
        function startMove()
        {
            var oDiv = document.getElementById('div1');

            setInterval(function ()
            {
                var speed = (300 - oDiv.offsetLeft) / 10;
              //speed = Math.ceil(speed); //向上取整
                //speed = Math.floor(speed);//向下取整用
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                oDiv.style.left = oDiv.offsetLeft + speed + 'px';

               document.title = oDiv.offsetLeft + ',' + speed;
            },30);
        }
    </script>
</head>

<body>
    <input  type="button" value="开始运动"  οnclick="startMove()" />
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>