问答: - 问答 - 第一PHP社区 php1.cn

问

发布于 1970-01-01 08:00

6 个回答

button:hover

2022-11-20 09:11 回答

多米音乐_34396075
首先
```
 <p id="botton" onclick="moveAE("line1", 350, 250, 10)">
        move
    </p>
```
"line1"这里用单引号，即：'line1'

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

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

最后
#botton :hover
中间不能有空格
2022-11-20 09:11 回答

chenshu华
html页面内嵌的script标签一般放在</body>之前，虽然js语法讲语句尾加不加分号都可以但是如果以后准备正经写这个还是加上吧，楼上说的第一个参数的问题，赋值操作符什么的明显是基础不牢啊少年，另外你把你想要干什么说清楚大家才好对症下药啊

2022-11-20 09:11 回答

pfm4191006
moveae第一个参数什么鬼啊？语法都不对

2022-11-20 09:11 回答

当王子爱上灰姑娘
js代码里的函数声明应该放在你button按钮绑定这个函数之前吧，你绑定函数的时候，这个函数都不存在，自然没有效果。

比较好的做法是，在js函数声明之后，用js给按钮绑定onclick事件

2022-11-20 09:11 回答

没有那么一个人_382

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>
<p id="botton">
    move
</p>
</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>

2022-11-20 09:11 回答

营营420_769

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签