Question

我试图创建一个小型JS点击游戏，其中来自文件夹的随机图像会产生并且用户点击它。我的代码在Localhost上工作正常，但当我将它全部移动到一个实时网站时，我得到一个404未定义的错误。

这是我的代码：

我现在一直试图解决这个问题，不能让它正常运作。我也知道CSS应该在外部文件中，并且最终会。 :)

<html>
    <head>
        <meta charset="utf-8">
        <title>Naamari_peli</title>

        <style type="text/css">
            body {
                font-family: sans-serif;
                margin: 0;
                padding: 0;
                width: 100%;
            }

            #shape {
                width: 100px;
                height: 100px;
                background-position: center;
                background-repeat: no-repeat;
                display: none;
                position: relative;
                background-size: 100%;
            }

            .bold {
                font-weight: bold;
            }

            #top{
                width: 90%;
                margin:0 auto;
                text-align: center;
            }

            #gameArea {
                margin: auto;
                height: 80%;
                width: 90%;
                border-radius:8%;
                border: 3px groove grey;
                position: relative;
                background-image: url(backgrounds/kai.jpeg);
                background-size: cover;
                background-position: top;

            }
        </style>
    </head>

    <body>
        <div id="top">
            <h1>Naamapeli</h1>

            <p></p>

            <p class="bold">Aika: <span id="timeTaken"></span></p>
        </div>
        <div id="gameArea">
            <div id="shape"></div>
        </div>

        <script type=text/javascript">
            var imgArray = [
            <?php
            $post_dir = "/";
            $images = glob($post_dir . "*.jpg");
            $listImages=array();
            foreach($images as $image){
                echo "'$image',\n";
            }
            ?>
            ];
        </script>

        <script type="text/javascript">
            var start = new Date().getTime();

            /* tää lista printataan PHP:lla sivupohjaan
            var imgArray = <?php echo json_encode($listImages); ?>; */

            var imgArray = [
                <?php
                $post_dir = "/";
                $images = glob($post_dir . "*.jpg");
                $listImages=array();
                foreach($images as $image){
                    echo "'$image',\n";
                }
                ?>
            ];

            function makeImgAppear() {
                var rand = imgArray[Math.floor(Math.random() * imgArray.length)];
                var urlString = 'url(' + rand;
                var top = Math.random() * 400;
                var left = Math.random() * 1100;
                var width = (Math.random() * 150) + 75;

                document.getElementById("shape").style.borderRadius = "50%";
                document.getElementById("shape").style.backgroundImage = urlString;
                document.getElementById("shape").style.width = width + "px";
                document.getElementById("shape").style.height = width + "px";
                document.getElementById("shape").style.top = top + "px";
                document.getElementById("shape").style.left = left + "px";
                document.getElementById("shape").style.marginBottom = 0.5 * width + "px";
                document.getElementById("shape").style.position = "relative";
                document.getElementById("shape").style.display = "block";
                start = new Date().getTime();
            }

            function appearAfterDelay() {
                setTimeout(makeImgAppear, Math.random() * 2000);
            }
            appearAfterDelay();

            document.getElementById("shape").onclick = function() {
                document.getElementById("shape").style.display = "none";
                var end = new Date().getTime();
                var timeTaken = (end - start) / 1000;
                document.getElementById("timeTaken").innerHTML = timeTaken + "s";
                appearAfterDelay();
            }
        </script>
    </body>
</html>

Answer 1

传递给glob（）函数的路径可能导致问题。我想你的图像文件与php脚本位于同一个文件夹中。所以你的目录结构看起来像这样：

htdocs
 peli.php
 kai.jpg
 someimg.jpg

如果要访问同一文件夹中的某个文件，则不需要前导斜杠。

使用以下

 // path without leading slash
 $images = glob("*.jpg");

或者你可以像这样使用相对路径

// relative path
$images = glob("./*.jpg");

两者都可以正常工作。

它在本地主机上而不是在您的实际站点上运行的最有可能的原因是运行与本地计算机不同的操作系统。在unix机器上，绝对路径以斜杠开头，例如

/etc/network/interfaces

如果您现在指定

/*.jpg

作为glob（）函数的输入参数，它可能会查找根目录中的jpg文件，具体取决于运行Web服务器的操作系统。

如果更改路径不起作用且错误仍然存在，请查看http://php.net/manual/en/function.glob.php上glob（）函数的文档。该功能可能在您的网络服务器正在运行的操作系统上不可用。

注意：某些系统（例如旧的Sun OS）不提供此功能。

或者glob（）还有其他错误，并且根据文档没有正确指出错误。

返回值

返回包含匹配文件/目录的数组，如果没有文件匹配则返回空数组，如果错误则返回FALSE。

注意：在某些系统上，无法区分空   匹配和错误。

您还可以查看http://www.delorie.com/djgpp/doc/libc/libc_426.html处的libc.a引用，因为php中的glob（）函数实现了libc glob（）模式匹配。

电贺，
最大

JavaScript适用于Localhost，但不适用于实时网站

1 个答案: