[已解决]为何点击了盒子。没有移动，指正下，非常感谢

小黄练编程 · 发表于 2022-4-10 14:23:06

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>练习</title>
                <style>
                div{
                        width:100px;
                        height:200px;
                        background-color:red;
                }
                </style>
        </head>
        <body>
                <div>1</div>
                <script>
                var div=document.querySelector('div');
                function animate(obj,target){
                        div.addEventListener('click',function(){
                        var timer=setInterval(function(){
                                if(obj.offsetleft>=target){
                                        clearInterval(timer);
                                }
                                obj.style.left= obj.offsetleft + 1 + 'px';
                        },30);
                });
        };
                animate(div,300);
                </script>


        </body>
</html>

最佳答案

月排行榜 / 总排行榜

kogawananari

2022-4-10 15:01:04

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>练习</title>
    <style>
        div {
            width: 100px;
            height: 200px;
            background-color: red;
            position: relative;
        }
    </style>
</head>

<body>
    <div style="left:0">1</div>
    <script>
        var div = document.querySelector('div');
        function animate(obj, target) {
            obj.addEventListener('click', function () {
                var timer = setInterval(function () {
                    if (Number.parseInt(obj.style.left) >= target) {
                        console.log(1);
                        clearInterval(timer);
                    }
                    obj.style.left = Number.parseInt(obj.style.left) + 1 + 'px';
                }, 60);
            });
        };
        animate(div, 30);
    </script>


</body>

</html>

跳转到最佳答案楼层

kogawananari · 发表于 2022-4-10 15:01:04

这个最佳答案由 kogawananari 给出，感谢 kogawananari 的回答。

单击隐藏图章

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>练习</title>
    <style>
        div {
            width: 100px;
            height: 200px;
            background-color: red;
            position: relative;
        }
    </style>
</head>

<body>
    <div style="left:0">1</div>
    <script>
        var div = document.querySelector('div');
        function animate(obj, target) {
            obj.addEventListener('click', function () {
                var timer = setInterval(function () {
                    if (Number.parseInt(obj.style.left) >= target) {
                        console.log(1);
                        clearInterval(timer);
                    }
                    obj.style.left = Number.parseInt(obj.style.left) + 1 + 'px';
                }, 60);
            });
        };
        animate(div, 30);
    </script>


</body>

</html>

小黄练编程 · 发表于 2022-4-10 16:52:42

kogawananari 发表于 2022-4-10 15:01

Number.parseInt(obj.style.left)这是啥意思啊

kogawananari · 发表于 2022-4-10 17:03:40

小黄练编程发表于 2022-4-10 16:52
Number.parseInt(obj.style.left)这是啥意思啊

str转int 单位会被去掉

账号		自动登录	找回密码
密码			立即注册