js动画失效，js函数内部规定原始css可以运行，外部html中#div{}定义原始css不能运行

2015.11.29 PM 5:47 修改更新
添加一段代码，改成用js规定#line2的css，最后直接onclick调用positionLine2()，就可以运行了。
但是我注释掉js中规定#line2的css的部分，然后再html中用css直接定义，就不行了
像下面这样：

p#line2 {
    color: #66ceff;
    position: absolute;
    top: 350px;
    left: 140px;
    font-size: 90px;
}
<script>

.....

function positionLine2() {
        if (!document.getElementById) return false;
        if (!document.getElementById("line2")) return false;
        /*
        var elem = document.getElementById("line2");
        elem.style.color = "#66ceff";
        elem.style.position = "absolute";
        elem.style.left = "140px";
        elem.style.top = "350px";
        elem.style.fontSize = "90px"
        */
        moveAE("line2", 290, 150, 5)
    }
   
.....

var bott = document.getElementById("botton")
    bott.addEventListener("click", function() {
        positionLine2()
    })
</script>

我觉得可能跟局部变量之类的有关系……但是并不清楚，只是js入门新手，希望知道原因的大神能指点一下

2015.11.29 PM 4:41 修改更新
谢谢各位的帮助~~新手捂脸感谢
代码根据各位前辈的指点改过一遍了，修改部分在上面备注指出，但是还是不行，这些代码的主要功能就是两行文字在点击按钮之后移动，但就是实现不了，继续求挑问题。

另外，还有一点别的疑惑，为什么repeat要这样用字符串的方式写

var repeat = "moveAE('" + elementid + "'," + xfi + "," + yfi + "," + intime + ")"

而不能直接向下面这样呢？

var repeat = moveAE(elementid, xfi, yfi, intime)

原始代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>hey</title>
</head>
<style type="text/css">
p#line1 {
    color: transparent;
    -webkit-text-stroke: 1px #66ceff;
    position: absolute;
    top: 350px;
    left: 140px;
    font-size: 90px;
}

p#line2 {
    color: #66ceff;
    position: absolute;
    top: 350px;
    left: 140px;
    font-size: 90px;
}
#botton {
    background-color:transparent;
    border: 1px #66ceff solid;
    position: absolute;
    top: 250px;
    left: 520px;
    font-size: 30px;
    color:#66ceff;
    width:150px;
    height:46px;
    line-height:40px;
    text-align:center;

}

/*#botton :hover{ 错误*/
#botton :hover{
    background-color:#66ceff;
    color:#ffffff;
}




</style>

<body>
    <p id="line1">Hello,John.</p>
    <p id="line2">削了个椰子，你却给个梨</p>
    <div id="botton">
        move
    </div>
</body>
<script type="text/javascript">
/*function moveAE("elementid", xfi, yfi, intime) { 错误*/
function moveAE(elementid, xfi, yfi, intime) {
    if (!document.getElementById(elementid)) return false
    var elem = document.getElementById(elementid)
    var xnow = parseInt(elem.style.left)
    var ynow = parseInt(elem.style.top)
    /*if (xnow = xfi && ynow = yfi) return false 错误*/
    if (xnow == xfi && ynow == yfi) return false
    if (xnow < xfi) {
        xnow++
    }
    if (xnow > xfi) {
        xnow--
    }
    if (ynow < yfi) {
        ynow++
    }
    if (ynow > yfi) {
        ynow--
    }
    elem.style.left = xnow + "px"
    elem.style.top = ynow + "px"
    var repeat = "moveAE('" + elementid + "'," + xfi + "," + yfi + "," + intime + ")"
    movement = setTimeout(repeat, intime)

}
/* 改为用js给按钮绑定事件 */
var bott = document.getElementById("botton")
    bott.addEventListener("click", function() {
        moveAE('line1', 350, 250, 10)
        moveAE('line2', 350, 350, 10)
    })

</script>

</html>

各种失效，代码是照着《javascript DOM编程艺术》写的，查了一遍感觉没错，有大神能看出来问题吗

javascript

html5 html

阅读 4.7k

6 个回答

kikong

✓ 已被采纳

1) 基本上每个JS语句后的；都缺失
2) moveAE在事件回调中为什么调用2次，目的是什么？
3) 通过getComputedStyle来获取通过CSS添加的样式最终值
4) parseInt(elm.style.left)可能获取结果NaN，所以要parseInt(elm.style.left)||0来保护操作
5)setTimeout/setInterval要避免出入字符串形式的函数，因其最终是通过eval函数调用，而eval函数是不推荐使用的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>hey</title>
</head>
<style type="text/css">
    p#line1 {
        color: transparent;
        -webkit-text-stroke: 1px #66ceff;
        position: absolute;
        top: 350px;
        left: 140px;
        font-size: 90px;
    }

    p#line2 {
        color: #66ceff;
        position: absolute;
        top: 350px;
        left: 140px;
        font-size: 90px;
    }
    #botton {
        background-color:transparent;
        border: 1px #66ceff solid;
        position: absolute;
        top: 250px;
        left: 520px;
        font-size: 30px;
        color:#66ceff;
        width:150px;
        height:46px;
        line-height:40px;
        text-align:center;

    }

    /*#botton :hover{ 错误*/
    #botton :hover{
        background-color:#66ceff;
        color:#ffffff;
    }




</style>

<body>
<p id="line1">Hello,John.</p>
<p id="line2">削了个椰子，你却给个梨</p>
<div id="botton">
    move
</div>
</body>
<script type="text/javascript">
    /*function moveAE("elementid", xfi, yfi, intime) { 错误*/
    var movement;
    function moveAE(elementid, xfi, yfi, intime) {
        if (!document.getElementById(elementid)) return false;
        var elem = document.getElementById(elementid);
        var computedstyle=getComputedStyle(elem);
        var xnow = parseInt(computedstyle.left)||0;
        var ynow = parseInt(computedstyle.top)||0;
        console.log(xnow);
        /*if (xnow = xfi && ynow = yfi) return false 错误*/

        //console.log(elem.style);
        function animation(){

            if (xnow == xfi && ynow == yfi) return;

            if (xnow < xfi) {
                xnow++;
            }

            if (xnow > xfi) {
                xnow--;
            }
            if (ynow < yfi) {
                ynow++;
            }

            if (ynow > yfi) {
                ynow--;
            }

            elem.style.left = xnow + "px";
            elem.style.top = ynow + "px";

            movement = setTimeout(function(){
                animation();
            }, intime);
        }
        animation();
    }
    var bott = document.getElementById("botton")
    bott.addEventListener("click", function() {
        moveAE('line1', 350, 250, 10);
        //moveAE('line2', 350, 350, 10);
    })

</script>

</html>

vuji

84151023

发布于
2015-11-29

更新于
2015-11-29

首先

 <div id="botton" onclick="moveAE("line1", 350, 250, 10)">
        move
    </div>

"line1"这里用单引号，即：'line1'

然后

#botton :hover{
    background-color:#66ceff;
    color:#ffffff;
}

//这里失效

//这里失效 这一行去掉，或者换成/*这里失效*/
*css里面没有//的注释

最后
#botton :hover
中间不能有空格

查看全部 6 个回答

推荐问题

js动画失效，js函数内部规定原始css可以运行，外部html中#div{}定义原始css不能运行

我觉得可能跟局部变量之类的有关系……但是并不清楚，只是js入门新手，希望知道原因的大神能指点一下

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

如何实现一个深拷贝函数？

快开发完的Vue3项目要做SEO该如何处理？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？