JS实现用键盘控制DIV上下左右+放大缩小与变色

// HTML 部分，为了示例，我们假设有一个ID为"myDiv"的div元素
// <div id="myDiv" style="width: 100px; height: 100px; background-color: red; position: absolute; left: 50px; top: 50px;"></div>

document.addEventListener('keydown', function(event) {
    let div = document.getElementById('myDiv');
    let scale = parseFloat(div.style.transform.replace(/[^0-9.]/g, '')) || 1; // 获取当前缩放比例，默认1

    switch (event.key) {
        case 'ArrowUp':
            div.style.top = `${parseInt(div.style.top) - 10}px`; // 上移
            break;
        case 'ArrowDown':
            div.style.top = `${parseInt(div.style.top) + 10}px`; // 下移
            break;
        case 'ArrowLeft':
            div.style.left = `${parseInt(div.style.left) - 10}px`; // 左移
            break;
        case 'ArrowRight':
            div.style.left = `${parseInt(div.style.left) + 10}px`; // 右移
            break;
        case '=':
        case '+':
            scale *= 1.1; // 放大
            div.style.transform = `scale(${scale})`;
            break;
        case '-':
            if (scale > 0.1) scale /= 1.1; // 缩小，但保留一个最小缩放比例
            div.style.transform = `scale(${scale})`;
            break;
        case 'r': // 假设'r'键用于改变颜色
            div.style.backgroundColor = getRandomColor(); // 调用函数获取随机颜色
            break;
        default:
            break;
    }
});

// 辅助函数：生成随机颜色
function getRandomColor() {
    let letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

这段JavaScript代码监听键盘事件，根据按下的键移动、缩放或改变一个具有特定ID的div元素的位置、大小和颜色。请注意，为了简化示例，我假设了div的初始样式，并且没有包括完整的HTML结构。此外，缩放是通过CSS的`transform`属性实现的，而颜色改变则是通过调用一个生成随机颜色的函数`getRandomColor`来实现的。在实际应用中，您可能需要根据具体的HTML结构和需求对代码进行适当的调整。