如何在纯JavaScript中为移动盒子添加永久路径箭头？

我编写了JavaScript代码实现了盒子的交替对角移动，但无法给移动的盒子添加永久箭头来指示其移动路径。我创建了一个50x50像素的盒子，让它从左上角到右下角交替对角移动，每次盒子移动时希望添加永久箭头追踪路径。按照要求用setTimeout()让盒子先沿Y轴移动，再沿X轴移动，现在需要实现箭头标记路径的功能，箭头要动态创建并在盒子每次水平/垂直移动时弹出标记路径。

现有代码 #

HTML代码 #

<!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>
    <link rel="stylesheet" href="style2.css">
</head>

<body class="body">
    <div id="box">
    </div>
    <script src="animate.js"></script>
</body>
</html>

CSS代码 #

.body {
    border: 1px solid none;
    height: 100px;
    width: 100px;
    position: relative;
}

#box {
    width: 50px;
    height: 50px;
    border: 3px solid red;
    background-color: green;
    position: absolute;
}

JavaScript代码 #

let box = document.getElementById("box");
let direction = 1;

box.style.left = "0px";
box.style.top = "0px";


function startBox() {
    let pLeft = parseInt(box.style.left);
    let pTop = parseInt(box.style.top);


    box.style.top = (pTop + 32 * direction) + "px";

    setTimeout(() => {
        box.style.left = (pLeft + 61 * direction) + "px";

    }, 150)


    if (pLeft >= window.innerWidth - 150 && pTop >= window.innerHeight - 197) {
        direction = -1;


    } else if (pLeft <= 0 && pTop <= 0) {
        direction = 1;
    }

}

setInterval(startBox, 650);

实现路径箭头的解决方案 #

思路 #

1. 用CSS边框绘制箭头元素，无需额外图片资源
2. 记录盒子每次移动的起点与终点，在移动完成后创建箭头并放置在路径中点
3. 根据移动方向（垂直/水平）设置箭头朝向

修改后的完整代码 #

新增箭头样式（CSS）

在原有CSS中添加以下代码：

/* 箭头基础样式 */
.arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: solid;
    z-index: 1; /* 确保箭头在盒子下方 */
}

/* 向下箭头 */
.arrow-down {
    border-color: transparent transparent #333 transparent;
}

/* 向上箭头 */
.arrow-up {
    border-color: #333 transparent transparent transparent;
}

/* 向右箭头 */
.arrow-right {
    border-color: transparent transparent transparent #333;
}

/* 向左箭头 */
.arrow-left {
    border-color: transparent #333 transparent transparent;
}

修改后的JavaScript代码

let box = document.getElementById("box");
let direction = 1;
let body = document.querySelector('.body');

box.style.left = "0px";
box.style.top = "0px";

// 创建箭头的工具函数
function createArrow(fromX, fromY, toX, toY) {
    const arrow = document.createElement('div');
    arrow.classList.add('arrow');

    // 计算箭头位置（移动路径的中点）
    const midX = (fromX + toX) / 2;
    const midY = (fromY + toY) / 2;
    arrow.style.left = `${midX}px`;
    arrow.style.top = `${midY}px`;

    // 根据移动方向设置箭头朝向
    if (fromY !== toY) {
        // 垂直移动
        arrow.classList.add(toY > fromY ? 'arrow-down' : 'arrow-up');
    } else {
        // 水平移动
        arrow.classList.add(toX > fromX ? 'arrow-right' : 'arrow-left');
    }

    body.appendChild(arrow);
}

function startBox() {
    let pLeft = parseInt(box.style.left);
    let pTop = parseInt(box.style.top);

    // 处理垂直移动
    const startVerticalTop = pTop;
    box.style.top = (pTop + 32 * direction) + "px";
    
    // 垂直移动完成后创建箭头
    setTimeout(() => {
        createArrow(pLeft, startVerticalTop, pLeft, parseInt(box.style.top));
        
        // 处理水平移动
        const startHorizontalLeft = pLeft;
        box.style.left = (pLeft + 61 * direction) + "px";
        
        // 水平移动完成后创建箭头
        setTimeout(() => {
            createArrow(startHorizontalLeft, parseInt(box.style.top), parseInt(box.style.left), parseInt(box.style.top));
        }, 150);
    }, 150);

    // 方向切换逻辑保持不变
    if (pLeft >= window.innerWidth - 150 && pTop >= window.innerHeight - 197) {
        direction = -1;
    } else if (pLeft <= 0 && pTop <= 0) {
        direction = 1;
    }
}

setInterval(startBox, 650);

效果说明 #

• 每次盒子完成垂直或水平移动后，都会在路径中点生成对应方向的箭头
• 箭头使用CSS边框绘制，样式简洁且不会影响页面性能
• 箭头始终显示在页面中，形成永久的路径追踪效果

内容的提问来源于stack exchange，提问作者tawsifahmed