开发者社区> 问答> 正文

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

添加一段代码,改成用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()
})

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

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

另外,还有一点别的疑惑,为什么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编程艺术》写的,查了一遍感觉没错,有大神能看出来问题吗

展开
收起
杨冬芳 2016-06-17 18:43:15 2469 0
1 条回答
写回答
取消 提交回答
  • 码农|Coder| Pythonista

    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>
    2019-07-17 19:43:28
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
Python第五讲——关于爬虫如何做js逆向的思路 立即下载
JavaScript异步编程 立即下载
天猫HTML5互动技术实践 立即下载