我正在尝试创建一个小型 JS 点击游戏，其中会生成文件夹中的随机图像，然后用户单击它。我的代码在本地主机上运行良好，但是当我将其全部移动到实时站点时，我收到 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>
最佳答案
您传递给 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 文件，具体取决于您的网络服务器运行的操作系统。
如果更改路径不起作用并且错误仍然存在，请查看 http://php.net/manual/en/function.glob.php 上的 glob() 函数的文档。该功能可能在您的网络服务器运行的操作系统上不可用。
Note: This function isn't available on some systems (e.g. old Sun OS).
或者 glob() 存在其他一些错误，并且根据文档未正确指示该错误。
Return Values
Returns an array containing the matched files/directories, an empty array if no file matched or FALSE on error.
Note: On some systems it is impossible to distinguish between empty match and an error.
您还可以查看 libc.a 引用 http://www.delorie.com/djgpp/doc/libc/libc_426.html因为 php 中的 glob() 函数实现了 libc glob() 模式匹配。
问候，
最大
关于JavaScript 可在本地主机上运行，但不能在实时站点上运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37896711/