Question

我试图创建匹配游戏的左侧，但我没有随机放置图像。它们总是出现在水平线上，而不是在div中随机出现。请指教，非常感谢！

编辑：这不是一个重复的问题。根据需要，我无法链接任何外部CSS或JS文件来制作这个游戏。

编辑：没关系，也许这是前一个问题的相对问题。搜索没有得出结果，因此要求。

<!DOCTYPE html>
<html>

<head>
</head>

<header>
    <h1>Matching Gmae</h1>
    <p>Click on the extra smilling face on the left.</p>
</header>

<body onload="generateFaces()">
    <!--division styling -->
    <!--left-->
    <div id="leftSide" style="position:absolute; width:500px; height:500px"></div>
    <!--right-->
    <div id="rightSide" style="position:absolute; width:500px; height:500px; left:500px; border-left: 1px solid black;"></div>


    <!-- starting Javascript-->
    <script>
        var numberOfFaces = 5;
        var i = 0;
        var theLeftSide = document.getElementById("leftSide");

        function generateFaces() {
            while (i < numberOfFaces) {
                var img = document.createElement("img");
                img.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
                img.style.top = Math.floor(Math.random() * 400) + "px";
                img.style.left = Math.floor(Math.random() * 400) + "px";
                theLeftSide.appendChild(img);
                i += 1;
            }
        }
    </script>>
</body>

</html>

Answer 1

正如@Xufox在评论中所写，应该为position和top设置非静态left以产生任何效果。

“复制”问题并未解释如何在JavaScript中执行此操作。

在您的脚本中，这意味着您应该添加：

img.style.position = 'absolute';

为什么在div内部使用内联而不是随机？

1 个答案: