JavaScript实现动态方块

最新推荐文章于 2024-01-17 12:02:56 发布

是阿信ya

最新推荐文章于 2024-01-17 12:02:56 发布

阅读量189

点赞数

分类专栏： JavaScript 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/qq_53972864/article/details/127948653

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        width: 50px;
        height: 50px;
        background-color: black;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>

<body>
    <div class="box"></div>
</body>
<script>
    var leftFlag=1;
    var topFlag=1;
    var x=5;
    var y=5;
    function move () {
        var box = document.querySelector('.box')
        var top = box.offsetTop
        var left = box.offsetLeft
        var winWidth=window.innerWidth
        var winHeight=window.innerHeight
        if(left+50>=winWidth){
            leftFlag=2;
            box.style.left = left - x + "px";
            left=left-x
        }
        if(left<=0){
            leftFlag=1;
            box.style.left = left + x + "px";
            left=left+x
        }

        if (0<=left && left<=winWidth) {
            if(leftFlag==1){
                box.style.left = left + x + "px";
            }
            else{
                box.style.left = left - x + "px"
            }
        }


        if(top+50>=winHeight){
            topFlag=2;
            box.style.top = top - y + "px";
            top=top-y
        }
        if(top<=0){
            topFlag=1;
            box.style.top = top + y + "px";
            top=top+y
        }

        if (0<=top && top<=winHeight) {
            if(topFlag==1){
                box.style.top = top + y + "px";
            }
            else{
                box.style.top = top - y + "px"
            }
        }   
    }
    setInterval(move,10)
</script>

</html>

效果图：
请添加图片描述