为何页面加载完毕之后小方块完全没有移动？

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>HTML5</title>
    <meta charset="UTF-8">
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .wrap{
        position:relative;
        width: 700px;
        height: 500px;
        margin:0 auto;
        border:2px solid #999;
    }
    .wrap div{
        position: absolute;
        left: 0;
        top: 0;
        width: 90px;
        height: 90px;
        background-color: #fcf;
        line-height: 90px;
        text-align: center;
        border-radius: 5px;
    }
    </style>
</head>
<body>
<div class="wrap" id="outer">
    <div class="box" id="inner">
        class
    </div>
</div>
<script>
    var outerbox=document.getElementById("outer"),
        innerbox=document.getElementById("inner"),
        posX=20,
        posY=60,
        moveX=true,
        moveY=true,
        timer=null;
    function move{
        if (moveX) {
            posX++;
        else{
            posX--;
            }
        };
        if (posX<=0) {
            moveX=true;
        };
        if (posX>=outerbox.clientWidth-innerbox.offsetWidth) {
            moveX=false;

        };
        if (moveY) {
            posY++;
        else{
            posY--;
            }
        };
        if (posY<=0) {
            moveY=true;
        };
        if (posY>=outerbox.clientHeight-innerbox.offsetHeight) {
            moveY=false;
        };
        innerbox.style.left=posX+"px";
        innerbox.style.top=posY+"px";
    }
    move();
    timer=setInterval(move,16);
</script>
</body>
</html>

你的代码的问题很简单，就是几个语法错误，仔细检查下浏览器的报错再发出来啊

包括不限于:

缺{和多}同时存在
function后面没有()

修正的：

<!DOCTYPE html>
<html>
<head>
    <title>HTML5</title>
    <meta charset="UTF-8">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            position: relative;
            width: 700px;
            height: 500px;
            margin: 0 auto;
            border: 2px solid #999;
        }

        .wrap div {
            position: absolute;
            left: 0;
            top: 0;
            width: 90px;
            height: 90px;
            background-color: #fcf;
            line-height: 90px;
            text-align: center;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="wrap" id="outer">
    <div class="box" id="inner">
        class
    </div>
</div>
<script>
    var outerbox = document.getElementById("outer"),
        innerbox = document.getElementById("inner"),
        posX = 20,
        posY = 60,
        moveX = true,
        moveY = true,
        timer = null;
    function move() {
        if (moveX) {
            posX++;
        } else {
            posX--;
        }
        if (posX <= 0) {
            moveX = true;
        }
        if (posX >= outerbox.clientWidth - innerbox.offsetWidth) {
            moveX = false;

        }
        if (moveY) {
            posY++;
        } else {
            posY--;
        }
        if (posY <= 0) {
            moveY = true;
        }
        if (posY >= outerbox.clientHeight - innerbox.offsetHeight) {
            moveY = false;
        }
        innerbox.style.left = posX + "px";
        innerbox.style.top = posY + "px";
    }
    move();
    var timer = setInterval(move, 16);
</script>
</body>
</html>

PS: 帮你改了你问题中的源码的排版，建议去了解下markdown语法: http://.com/markdown

【热门文章】