方块在页面左右来回移动

来源:互联网 发布:淘宝试用中心在哪 编辑:程序博客网 时间:2024/05/03 07:42
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
        }
        body{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<input type="button" value="移动" onclick="move()"/>
<div id="div1" style="" ></div>
<script>
    var length=1;
    function move(){
        var div1=document.getElementById("div1");
        if(isNaN(parseInt(div1.style.left)))
            div1.style.left="1px";
        else
            div1.style.left=parseInt(div1.style.left)+length+"px";
        if((parseInt(div1.style.left)+div1.offsetWidth>=document.body.offsetWidth)
                || parseInt(div1.style.left)<=0){
            length*=-1;
        }
        setTimeout(move, 10);
    }
</script>
</body>
</html>
0 0
原创粉丝点击