Question

我在javascript中有一个项目，它是关于使用键盘移动的正方形（向上，向下，向右，向左），现在我希望能够将正方形的形状更改为三角形或圆形，例如。我想通过按下例如1并将形状更改为圆形2来完成此操作，并将形状更改为三角形。同时我希望新形状能够使用向上，向下，向左，向右移动

问题是，我怎样才能将方形的形状改成三角形？还是一个圆圈？

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Interactiune cu tastatura</title>
    <script src="./main.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div id="patrat"></div>
<div id="triangle"></div>
<div id="circle"></div>
<p id="demo"></p>

</body>
</html>

CSS

@CHARSET "UTF-8";

#patrat {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
    background-color: blue;
}


#triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}


#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

main.js

    var step = 100,
        squareLeft = 0,
        squareTop = 0,
        squareSide = 100,
        triangleLeft = 0,
        triangleTop = 0,
        triangleSide = 100,
        circleLeft = 0,
        circleTop = 0,
        circleSide = 0,
        screenWidth = 1920,
        screenHeight = 1080;


document.addEventListener('keydown', function(event)
    {

    var keyCode = event.keyCode,
        spaceLeft = 0,
        x = document.getElementById("patrat");
        y = document.getElementById("triangle");



    switch (keyCode) {
    case(49):
    document.getElementById("circle");

    case (13):  /*ENTER*/
        /*document.getElementById("demo").innerHTML = "Text test";*/
        /*document.getElementById("demo").innerHTML = x.style.backgroundColor;*/
            x.style.backgroundColor = "rgb(255,255,0)";
    break;

    case (37):  /*ArrowLeft*/
        if (squareLeft > 0) {
        squareLeft = (squareLeft > step) ? squareLeft - step : 0;
        x.style.left = squareLeft + "px";
        }
    break;

    case (39):  /*ArrowRight*/
        spaceLeft = screenWidth - squareLeft - squareSide;
        if (spaceLeft > 0) {
            squareLeft += (spaceLeft > step) ? step : spaceLeft;
            x.style.left = squareLeft + "px";       
        }
    break;

    case (38):  /*ArrowUp*/
        if (squareTop > 0) {
            squareTop = (squareTop > step) ? squareTop - step : 0;
            x.style.top = squareTop + "px";
        }
        break;

    case (40): /*ArrowDown*/
        spaceLeft = screenHeight - squareTop - squareSide;
        if (spaceLeft > 0) {
        squareTop += (spaceLeft > step) ? step : spaceLeft;
        x.style.top = squareTop + "px";
                }
    break;

    default:
    alert("Aceasta tasta nu este utilizata");
    break;

    }
    }
);

Answer 1

如果你的三角形CSS类是正确的，看起来你可以从更改元素的ID开始：

document.getElementById('circle').id = 'triangle';

...但这种架构很脆弱，不推荐。改进之路将是使用类名：

document.querySelector('.circle').className = 'triangle';

将第一个带有circle类的DOM元素转换为三角形。你的CSS看起来像

.circle {
    ...
}

.triangle {
    ...
}

要将所有.circle转换为.triangle，请执行以下操作：

document.querySelectorAll('.circle').forEach(function(element) {
    element.className = triangle;
});

同样，这是假设您的CSS类正在按预期呈现形状。

Javascript切换现有形状的形状

1 个答案: